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Welcome 


Welcome 
to the Issue 


THE WEB DESIGNER MISSION 


CSS: style and substance Highlight 


f you are reading this then there is a keyframes, performance and SVG animation along the 

good chance you know what CSS is. We way. Want to know the ins and outs of CSS Grid? Then 

like to call it the king of styling, but head to page 52 as we take you through the basics and 

Cascading Style Sheets in 2018 have so beyond, and offer a few tips along the way. 

much more to offer than simple styling. Not as sexy as animation but just as important is 

This issue we decided it was time to optimisation. Head to page 58 to get quick and easy tips 

show off some of the immense talents 0 lighten the code load and get faster-loading sites. CSS 

that CSS has to offer and give an insight preprocessors let you extend CSS and make it even more 
into some of the lesser-known but still essential powerful. We take a closer look at the very popular 
elements that anyone needing to sharpen up preprocessor Sass and show how to use it to style your 
their skills really needs to know. sites. Everyone likes rules and best practices when it 

So what is on offer? We kick off with eight comes to code, so on page 72 Ahmed Abuelgasim delves 

pages all about CSS animation. This takes you into CSS methodologies and how to use them. Elsewhere, 
from storyboarding through to implementing a CodePen engineer Cassidy Williams shows off CSS art 
simple project, while passing transitions, skills, and we look to the future with Houdini. Enjoy. 


Web Designer finds out what's going on at 
Code and Theory. Page 32 


Follow us on Twitter for all the news & conversation 
Visit our blog for opinion, freebies & more 


Video Tuition - New chapters of expert PHP video guides 
from Killersites (shop.killervideostore.com) 


Assets - 24Luminous Presets and 10 iPad Pro (3G) mockups from 
Sparklestock (sparklestock.com) 


- Tutorial files and assets 


FileSilo www filesilo.co.uk/webdesigner 


welcome 3 


Meta 


Contributors 


This issue’s panel of experts 


Welcome to that bit of the mag where we learn more 


about the featured writers and contributors... 


Leon Brown 


Leon is a freelance web 
developer and trainer who 
assists web developers in 
creating efficient code for 
projects. This issue he takes 
a look at CSS Grid and 
shows how to create grids, 
offering up some useful tips. 
_ | Page 52 


Ahmed is a self-taught 
frontend web developer 


currently working for Potato. 
B» In this issue he explains CSS 
‘| methodologies, describes 
the popular ones and 
explains how to combine 
them to create a custom 
one. Page 72 


Tam Hanna 


Tam believes in taking a 
360-degree view of things. 
He believes achieving high 
performance in websites is 
always a team effort. In this 
issue he demonstrates the 
techniques and tools 
needed to make your CSS 
|__| blazingly fast. Page 58 


: Ahmed Abuelgasim 


Mark Shufflebottom 


Mark is a professor of 
Interaction Design at 
Sheridan College near 
Toronto. In this issue he 
takes a peek at some of the 
hottest properties out there, 
who you should follow and 
great examples of 
cutting-edge CSS. Page 76 


Simon Jones 
Simon is a former corporate 
engineering director, now 
working at a tech startup. 
He's led full-stack teams 
working with many different 
technologies. This issue, he 
looks at how Sass can make 
it easier to manage 
stylesheets. Page 64 


Matt Crouch 


Matt is a software engineer 
at Vidsy, where they use 
Redux to power all of their 
React products. In this issue 
Matt demonstrates how to 
get up to speed with the 
concepts of Redux in the 
first of a five-part React 
series. Page 86 


experts 


Steven Roberts 

Steven is a digital creative 
from Stockton-on-Tees. He is 
currently leading UX, Design 


Steven has spoken at 
conferences about CSS 
animation this year, so for this 
issue we have gotten him to 
share some of his extensive 
knowledge with a host of tips 
and techniques. 

Page 42 


Richard Mattka 


Richard is an award-winning 
creative director, designer 
and developer, specialising 
in VFX and entertainment 
projects. In this issue he 
delves into the world of SVG 
and shows how to create 
and implement SVG for the 
web. Page 80 


Cassidy Williams 


Cassidy is a senior software 
engineer at CodePen. She's 
active in the developer 
community and one of 
Glamour magazine's 35 
Women Under 35 Changing 
the Tech Industry. This issue 
we get insight into her world 
and CSS art. Page 68 
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WebDesignerUK 
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webdesignermag 
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PUT A PAUSE 
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With so many demands from work, home and family, 
there never seem to be enough hours in the day for you. 
Why not press pause once in a while, curl up with your 
favourite magazine and put alittle oasis of ‘you’ in your day. 
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Ontents 


Cutting-edge features, techniques and inspiration for web creatives 


Chat with the team and other readers and discuss the latest tech, trends and techniques. Here's how to stay in touch... 
webdesigner@futurenet.com e @WebDesignerMag e www.reativeblog.com 


08 Thestate of JavaScript today 
What's popular? What are the big earners? Cover focus 


Web Designer looks at the latest SOJ report 


11 Keeping up with the web 
industry 
Web Designer catches up with Christian 
Heilmann, who talks Twitter, Slack and more 


12 Webkit: The best must-try 
resources out there 
Discover the libraries and frameworks you need 


16 Lightbox 


A showcase of inspirational sites and the 
techniques used to create them 


24 Backissues 
Catch up on any issues of Web Designer that 
you've missed by downloading a digital edition 


26 Bon Voyage 
Green Chameleon captain a site redesign for 
superyacht experience-providers Asaro 


32 Decoded Design 
Web Designer talks to Code and Theory about 
how they work and craft digital landscapes 


All you need to bea CSS Pro 
Discover essential CSS animation tips, how to 
build with Grid, the best CSS methodologies, 

how to optimise your code and much more 


80 SVGonthe web 


SVG support is finally where it should be. 
Discover how to use in your projects 


92 Hosting listings 
An extensive list of web hosting companies. 
Pick the perfect host for your needs 


94 Course listings 
Want to start learning? Check out 
what courses are out there with this list 


We deyelap and deploy technology to 


98 Nextmonth make this possible InFinity Made 
What's in the next issue of Web Designer 
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TUTORIALS 


CSS animation tips & tricks 
Learn the finer points of CSS animation and 
how to implement them into a project 


FILESILO 


Get the latest must-have 
resources and videos 


« New chapters of expert PHP video 
guides from Killersites 

«24 Luminous presets and 10 iPad Pro 
mockups from Sparklestock 


Build with CSS Grid 
Discover the basics and beyond. Get essential 
tips and techniques for better layouts 


Get blazingly fast CSS 
Cut out unnecessary code and slim down your 
stylesheets for faster-loading sites 


Style sites with Sass 
Extend your CSS and make styling easier with 
this popular preprocessor 


CSS art with Cassidy Williams 
Cassidy Williams, Senior Software Engineer at 
CodePen, shows how to illustrate with CSS 


CSS methodologies : 
Discover what methodologies are, which ones Photo Share @ myfavouritemagazi nes 


are popular and create a custom one 
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Visit the Web Designer online shop at 
myfavouritemagazines.co.uk 
for the latest issue, back issues and specials 


Cutting-edge CSS 
Stay on top of trends, find out what are the hot 
properties and what is Houdini 


Manage React app data 

Learn how to create an API-powered state 
application and discover the benefits of a 
centralised data store 


DIGITAL EDITION 


Do you want to get your hands on a digital edition? 
Head to your preferred app store, download, 
install and purchase the issue of choice 


Google Play — bit.ly/2wetvGp 
iTunes — apple.co/2igtBYq 
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Header 


The tools, trends and news to 
inspire your web projects 


JavaScript: which are 
the popular choices? 


The State of JavaScript 2018 survey gives a deep 
insight into who's using what in the world of JS 


longside HTML and CSS, 
JavaScript is the key 
technology that is driving 

i forward web development. 
It is always moving forward, with new 
frameworks, tools and variations 
seemingly making an appearance almost 
weekly. While new additions add more 
power and panache to a designer’s or 
developer’s arsenal, the hard part is 
deciding which ones you need to be 
paying attention to. Who are the big 
players? Who are the newcomers to watch 
out for? Who's going to be the one that 
pays the big bucks? Choosing the right 
path is not an easy task, so any help 
newcomers and established developers 
can get is always welcome. 

The State of JavaScript survey is an 
annual report that provides a wealth of 
information on what developers are using, 
what they’re happy with and what they 
want to learn. The latest report surveyed 
over 20,000 developers. So where do all 


(4) CREATIVE BLOO 


creativeblog.com 


2 tech job interviews 


30 portfol 
check out 


these developers come from? The largest 
contributor is the US with nearly 25 per 
cent of respondents, with Australia and 
Germany offering over 5 per cent of 
respondents. The UK contributed 3.78 per 
cent. Africa had the fewest respondents, 
with Libya, Somalia, Angola and 
Mozambique only having one respondent 
each. As might be expected, the vast 
majority - over 18,000 - of those who 
participated in the survey were male. 
There were 931 female respondents. A 
representation of how the market stands? 
JS developers rarely use a single library 
or framework. Even the popular choices 
have a companion. For example, React 
users also connect with Redux, Express, 
Mocha, Jasmine, Jest and of course ES6. 
So what are the popular front-end 
frameworks? As might be expected React 
tops the charts, with 65 per cent using and 
happy to use it again. It’s not all roses 
though, as 6.7 per cent had used it and 
would not use it again. But 19 per cent 


In-depth tutorials, 
expert tips, 
cutting-edge 
features, industry 
interviews, 
inspiration and 
opinion. Make 
sure to get your 
daily dose of 
creativity, design 


wanted to learn. Sitting in second place 
was Vue,js, closely followed by Angular. 
One interesting point was that over 46 per 
cent wanted to learn to use Vue.js while 
33.8 per cent had used Angular but would 
not use it again. The remaining 
frameworks in the top six were Preact, 
Ember and Polymer, with around 25 per 
cent of respondents keen to learn Preact 
and Polymer. But what other libraries got a 
mention? The two standouts were Svelte 
and Aurelia, with jQuery still hanging on in 
there. Looking at back-end frameworks, 
Express is way out in front, with nearly 65 
per cent saying they had used it and would 
again. Next was Next.js with nearly 9 per 
cent. Looking at mobile and desktop it was 
close between Electron and React Native, 
with over 50 per cent keen to learn both. 
The State of JavaScript survey is a 
goldmine of JS-related information, a 
fascinating read and beautifully presented. 
We have only scratched the surface here 
so look at 2018.stateofjs.com to see in full. 
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STAT 


ATTACK 


MOBILE 
VENDORS 


Who are the big 


players in the 


European market? 


Samsung 


SZ io” 


Down 3% on the same 
time as last year 


Apple 


ZG" 


Almost identical to the 
previous year 


Huawei 


ao” 


On the rise, 4% up 
on last year 


Xiaomi 


CW icn 


A low rise, 2% up 
on last year 


a 72” 


Slight downward spiral, 


by less than 1% 


> 


Source: http://gs.statcounter.com 
(correct as of November 2018) 
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Sites of the month 


oe 
Graphics 
Logotypes vol.5 
https://bit.ly/2DQkCHg 
A collection of gorgeous hand-drawn 
logotypes from designer Martin Schmetzer 


Colour picker 
Sensei 
https://bit.ly/2OTKjI5 


#E01764 
#DE4477 


#B57CA5 
#A092AC 7 


#8EABAF 


10 Inspiration 


view this 
website 


-~c randstad 


on your mobile 


Montréal in 
Motion is an 
event series 


showcasing the 
talent of digital 
artists 


Montréal in Motion (mim) 


Typesetter 

Finbe 

https://bit.ly/2qZwpuk 

Based on 19th-century typefaces and 
posters, Fixture offers four widths ranging 
from Ultra Compressed to Expanded 


abel 
Waoha ad 


O1. Trade Aid 
tradeaidchocolate.co.nz 

A video background and overlaid graphics 
combine to reinforce the site’s message 


O2. Old Spice - Big Lavender 
biglavendergame.com 

A classic old-school shooter is a smart way 
to market Old Spice for a new generation 


03. Human Forward 
https://bit.ly/2A2PgJg 

Big, bold and impressive animations make 
sure that the user is constantly engaged 


04. MiM event 

gomim.com/en 

Subtle background animations combine with 
subtle movement as the users swipe or scroll 


WordPress 


Miraculous 

https://bit.ly/2TuCITS 

Starting a Spotify style site? This theme offers 
what you need to create an online music store 
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Keeping up with 
the web industry 


Web Designer recently caught up with Christian Heilmann at Reasons.to 


Christian Heilmann 
christianheilmann.com 


Twitter @codepo8 
—————————S___ 


66 Im happy to 
pretend (or 
sometimes be 
honest) that I dont 
know things, just to 
be an example for 
other people 99 


Ithough there is definitely value in social media, there is an issue with the 
amount of noise it generates. On Twitter, the problem is exacerbated by the 
fact that the timeline is not in sync any longer. It’s just a random presentation 
of what might be interesting for you, which means you miss a lot. I’ve got 
64,000 followers on Twitter, and yet I get all my resources via RSS feeds. | can’t 
find much on Twitter because it gets lost in the noise. 

The other problem that social media has caused is that instead of learning from each other, 
people try to create resources that get the most likes or retweets. We try to shortcut a lot. The 
priority is to make a cool headline that will get shared. I’ve blogged since 2005, and my blog posts 
are always long. This used to work, but now people just zone out. We’ve become less patient with 
learning. We’ve seen too many things come and go, and it feels like the investment in learning is 
not worthwhile given the speed of changes in the market. 

It’s not all bad, though. There’s a lot of good stuff happening on Slack groups. And, although it’s 
not easy to use, I’d recommend trying Mastodon, which is like a more organised Twitter. There are 
also a lot of learning resources on GitHub. There are training courses you can take on other 
platforms, but GitHub is where people are channelling a lot of their efforts now. It also tends to get 
the most edits, so content there is generally up-to-date. 

If you want to get started, taking part in open source projects is the best way. Helping with a 
typo or a bit of documentation, or making a demo for a product and asking the owner if they want 
to have it on the GitHub repo is a great way to get your name known. People publish great things 
as open source but often don’t have time to show the implementations or write documentation. 

Although these platforms provide a good place for people to get involved in the industry, we 
need to work on being more welcoming to newcomers. The web industry is not accepting of 
people who don’t speak the right language. People and tutorials hide behind massive terms and 
clever-sounding messages. This could be a natural thing. When you're an expert and you want to 
talk to other experts, sooner or later you develop a defined lingo, and that’s fine. But starting with 
this lingo and overwhelming newcomers that want to learn something is annoying. People are 
repeating the same sentences that they don’t even understand, just trying to fit in with the crowd. 

Because of this peer pressure, newcomers often don’t dare to speak up when they don’t 
understand. | love that, as somebody who is in the know, | can do that for them. | interfere and say, 
“OK, but what does that mean?” I’m happy to pretend (or sometimes be honest) that | don’t know 
things, just to be an example for other people so they might find the courage to do the same. 

This is a particular problem with new technologies and buzz phrases. People make a lot of 
money by saying half-clever things about a technology rather than showing what it can be used 
for. Everything is Blockchain right now. 90 per cent of people on the planet can’t explain what 
Blockchain is. “We’re using Blockchain for that” - of course. The same way we used ‘the cloud’. 

Being on the bleeding edge is interesting, but we’re chasing our own tails a bit and not giving 
new technologies enough time to mature and become useful. | want to see more products being 
created with these technologies. I’m currently working on a W3C proposal for Machine Learning 
in the browser. It would mean you could do facial recognition, audio recognition and similar ‘Al’ 
tasks on your own machine, rather than having to send it to Amazon, Google or Microsoft to get it 
analysed there. That way the privacy of your own data is much more given. There’s an open 
standard for the file format but not an open standard for the access to it. That’s something we’re 
proposing right now, and that’s what | want to see much more of. 

Everybody sells their current solutions as magic rather than explaining them. | know graffiti 
painters who learned how to paint on canvas first because they need to know the craft before 
they can do the art. They are stunning at what they do as they chose to subvert the original art. 
We’re not patient enough right now to learn the ropes before calling ourselves experts. 
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Discover the must-try resources that 
will make your site a better place 
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SVG Filters 


yoksel.github.io/svg-filters/# 


Drag primitives here to create filter 


Text 


color-interpolation-filters: 


Want to see SVG filters in action without 
applying lines and lines of code? Then this 
rather neat online tool enables you to add 
different filters with a single click. Add 


GaussianBlur to see the filter in action. Like 
it? Copy the code and use in your project. 
Experiment with the other filters to get the 
look you want. 


TOP5 
CODEPENS 


Be inspired by this collection of smart 
and interesting codebases 
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Relaxing Recursive React 


codepen.io/terabaud/pen/RqQmOX 

An animated repeating pattern built with 
React that mesmerises and relaxes. Watch in 
a darkened room and feel the calm. 


Old-school DVD 


codepen.io/foleyatwork/pen/MzGKWq 

If you have a DVD player, this a faithful 
recreation of the sleep screen. If not, watch 
and admire what you're missing. 
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File icon extensions 


Icons for files doc, docx, log, txt, wps, csv, dat, ppt, xml, mp3, wav, avi, mov, mp4, 3ds, max, gif, ai, svg, 
pdf, xls, xlsx, sql, exe, js, html, xhtml, css, asp, ttf, dll, 72, zip, ¢, cs, java, swift, torrent, php, hh, go. 
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DAY.JS 


Fast 2kB alternative to Momentjs with the same modern API 


zp size [BIST bold license (MIT 


nn ed ‘i’ Android ©) Firefox @ Chrome @ IE @ iPhone @ Edge ® Safari 
Sizes eae rae ae er sects 
CSS file icons Day.js 


colorswall.github.io/CSS-file-icons 
Pure CSS file icons for popular extensions, including doc, 


docx, log, txt, wps, csv, dat, ppt, xml, mp3, wav, avi, mov, mp4. 


Available in different sizes. 


github.com/iamkun/dayjs 

This is a minimalist JavaScript library that parses, validates, 
manipulates and displays dates and times for today’s 
browsers with a largely Moment.js-compatible API 


IDEOHY-CROP 


You can find here damn simple and juicy tool for video cropping 


Your video turned out to be badly cropped? You can fix it here @ 


Indigo.Design . Start a free trial 


Fast, Code-Free Prototyping = = of Indigo.Designt 


How to crop video online - tutorial for dummies 


A JavaScript Charting Library for Streaming Data 
See It Get It Use It 
o: Download smoothie js Read the Ten Minute Tutorial 
bad Explore, configure and generate code 
Hello world example 
Discussion and Support 
Server CPU usage example 
Responsive chart example 
by Joe Waines #5 w 3" 
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Video Crop 

video-crop.com 

Want to crop your videos quickly and easily? This drag and 
drop tool is the answer and comes as part of a collection of 
video tools 


Smoothie Charts 

smoothiecharts.org 

Turn your data into live streaming graphs with this JavaScript 
Charting library. Read the Ten Minute Tutorial and create 
with the easy-to-use Chart Builder. 


te my time on the Internet 
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Bedroom 


Catch the Carrot Periodic Table Rounded Range Slider 


codepen.io/MalaikaMI/pen/VVQpmW codepen.io/oliviale/pen/ZmvPPd codepen.io/Artemis1/pen/Gwywoj 

A simple game where you have to catch the ACSS based - slightly modified - periodic Astyled-up temperature gauge that shows 
carrot. Give it a try and see if you can beat table that cleverly reflects how Olivia, the Fahrenheit and centigrade. Use the slider to 
our score of five. designer, wastes their time on the internet. change or enter manually. 
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e 
We kit Discover the must-try resources that 
will make your site a better place 


Welcome tc 
wonderful 
Performanc 


Sitespeed.io is a set of Oper 
to monitor and measure the 


Measuring performance sha 
able to have full control of 
and you should be able to d 


That's why we created sitesf 


SS 
i. ii. i | ee = i Ji ——— ~ “ 
it d ° Sitespeed.io is a set of open source tools you helpful instructions on how to install and 
Sl espee 10 might or might not have heard of that make it | which tools to use for what. Only interested 
sitespeed.io easy to monitor and measure the in timing metrics, then use Browsertime. 
performance of your website. Includes Want to find issues, use The Coach. 
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WORDPRESS 
THEMES 


Need anew page design fast? Then 
check out this collection of themes 


raves © 


SWIFT'S POWERFUL 
MESSAGE FOR YOUNG 
TH vorens 


Jawn 
https://bit.ly/20YnIzv mvpthemes.com/jawn 
A modern, contemporary image-led news/ Big image, smart styles and modern fonts 
magazine style theme. Homepage options make this theme the ideal option for the 
enable you to get a more custom option. modern-day blogger. 
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EASELJS TWEENJS — SOUNDJS PRELOADJS DOCS TOOLS 


@ CREATEJS 


DOWNLOAD GETTING STARTED 
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SoundJS 

createjs.com/soundjs 

A JavaScript library that helps make working with 
audio “a breeze”. It offers a simple API that abstracts 
HTML5 sound implementation. 


Colorblindly 

https://bit.ly/2DJKa80 

Accessibility is important, and this Chrome extension 
simulates what users with colourblindness will see in 
the web browser. It offers eight different settings. 


Features Pricing Customers Help Blog 


C9 lookback 


Talk to your users 


See how they’re using your app or website. 


Start free trial 


vyoo 


Beautiful, Free 
Vertical Videos 


to stay in the loop. 


Send an email to \@veed.io to 
submit your video 


Lookback 

lookback.io 

Want to know how people are using your site or app? 
Of course you do. Do real-time video testing, remote 
testing and in-person testing. 


Vyoo 

veed.io/vyoo 

This is simple. It offers beautiful, free vertical videos, 
with new ones uploaded every week. Download the 
video or edit with Veed. 


Insider. Home Top Stories Events Videos Pages | Qa 


5 Utings I learned dtrimg my 
year-long photography adventure 


Insider 


darinka.design/insider 


https://bit.ly/2AjELkP 


Pager Shop® Blog Contact Us 


cee, 


Panay ar 


Hayden 


https://bit.ly/2DIPjxp 


A classic, clean image-led layout with image 
animations to help engage users. A 
multipurpose theme with a touch of style. 


A modern image-led gallery theme. Ideal for 
photographers, artists, illustrators or any 
other image-led site. 


An e-commerce theme aimed at children. As 
you might expect, it offers bright, bold 
colours and easy-to-navigate menus. 
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Our mission is to reforest 
billion hectares of deg: 


We develop and deploy t 
make this possi 


Designer: 
Qikker Online www.gikkeronline.nl 


66 Based in 
Amsterdam 
and 
operating 
across 25 
countries, 
Land Life 
Company's 
mission is to 
help reforest 
2 billion 
hectares of 
degraded 
land 99 


Colours 


#888208 #726959 


#D79C62 #DAA9OE 


Tools 


WordPress, PHP, Yahoo Ul 
VavaScript), YouTube 
Fonts 


abcABC 
1234567890 


Avenir by Adrian Frutiger, 


' plus Montserrat by Julieta 
the world $2 Ulanovsky are both used to 
render page headings and 
raded land paragraphs throughout. 


>chnology to abcABC 
ble 1234567890 


Spectral font by Production 
Type, also available via 
Google Fonts, provides the 
serif styled typeface found 
on links and quotes. 
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Zambia 


Grow Zambia! 


It is not often that we get the chance to work on a 


project that brings together all the elements we 
believe are crucial to the sustainable restoration of 


our. 


Read more 
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A Greener Desert 


The rolling dunes, sand for miles, a 


barren desert landscape. These are the 


images many associate with Saudi 


Arabia. Harsh as its environment is in 


many places, Saudi Arabia does... 


Read more 


lightbox 


Project locations are plotted ona 
rollover world map, with key area 
hotspots highlighted for viewing 
details on click 


Farleft 

Projects can also be viewed ina 
more linear layout, stacking a 
stream of photos and quotes under 
links for quick navigation 


Left 

Beyond the opening header, a 
minimal colour palette is employed 
to allow beautiful location 
photography to be more impactful 


LightBox 
Land Life Company 


Create a cursor-controlled 
interactive spotlight effect 


A spotlight effect allows users to search and reveal additional parts of background imagery 


1. HTML document initiation 
The first step is to define the webpage as a HTML 
document. This consists of the HTML document 
container used to contain the head and body sections. 
While the head section is used to incorporate the 
external CSS and JavaScript resources, the body section 
is used to store the content elements that are created in 
the next step. 

<!DOCTYPE html> 

<html> 

<head> 

<title>Cursor Spotlight</title> 

<link rel="stylesheet” type="text/css” 

href="styles.css” /> 

<script src="code.js”"></script> 

</head> 

<body> 

*xkk STEP 2 HERE 
</body> 
</html> 


2. Body content 
The content placed inside the document body sets up a 
header element used to store content required for the 
effect. The div element is used as a container to control 
text and image content we want to place inside the 
header element. This HTML is defined to be SEO friendly 
by keeping elements and styling for the effect defined 
separately in the CSS and JavaScript files. 
<header> 
<div> 
<h1>Hello</h1> 
</div> 
</header> 


3. JavaScript load event 
Create a new file called 'codejs: For the effect to work, 
JavaScript is used to modify the header element created 
in the previous step. This header element is only available 
after the page has loaded. An event listener is applied to 
the window to execute a function containing specific 
instructions after the page has loaded. This step finds 
the header section and inserts a span element as the 
first child. 
window. addEventListener("load” , function(){ 
var header = document. 
querySelector("header”) ; 
var node = document. 
createElement ("span") ; 
var handle 
header. insertBefore(node, header. 


firstChild); 


xk STEP 4 HERE 
Ds 


4. Movement listener 
JavaScript is also used to attach an event listener to the 
header element found in step 3. This listener executes 
code to find the child element created in step 3, upon 
which new styles are calculated for its placement and 
background positions. Mouse co-ordinates relative to the 
header element are provided via the 'e’ parameter. 
header . addEventListener (""mousemove” , 
function(e){ 

var shape = this.firstChild; 

var x = e.offsetX; 

var y = e.offsetY; 

shape.style.left = x + "px"; 

shape.style.top = y + "px"; 


shape.style.backgroundPosition = (Q-x)+"px 
"4(O-y)+"px"; 
3 


5. CSS: header styling 
Create a new file called 'styles.css’ This step defines the 
styling for the header element, making it cover half of the 
web page. The background image for the element is also 
selected, with its size adapted to cover the full width of 
the header element. Overflow and cursor presentation 
are set to hidden to keep the effect tidy. 
header{ 

position: relative; 

display: block; 

height: 5Qvh; 

background: url(image. jpg) ; 

background-size: 100%; 

cursor: none; 
overflow: hidden; 
color: #fff; 


} 


6. Gradient overlay 
A gradient is required to be placed over the background 
image. The ‘before’ virtual element is used to achieve this 
in a way that avoids additional HTML requirements. This 
element is sized and positioned to cover the full space of 
the header element with its own background image, 
created with a CSS-generated linear gradient. 

header: :before{ 

position: absolute; 


content: "”; 

display: block; 

width: 100%; 

height: 100%; 

background-image: linear-gradient(to 


right, 
rgba(@,0,0,0) 2%, 
rgba(@,0,0,0) 30%, 
rgba(@,@,0,1) 50%, 
rgba(@,0,0,1) 
De 
top: Q; 
left: Q; 
iy 
7. Header children 


All first-level children of the header element require 
absolute positioning in order to benefit from having a 
z-index. The first child is also styled with a width and 
height, along with a full border radius to appear as a 
circle. The same background used for the header is also 
applied - enabling this to be modified by the JavaScript in 
response to any mouse movement. 
header > x{ 
position: absolute; 
3 
header > *:first-child{ 
display: block; 
width: 4Qvh; 
height: 4Qvh; 
background: red; 
border-radius: 100%; 
background: url(image. jpg); 
background-size: 100vw; 


We develop and deploy tech 
make this possible 
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Designers: 


Renaud Rohlinger, Developer _ | 


renaudrohlinger.com 


Sofiane Hocine, Art 
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66 More 
interactive 
experience 
than website, 
Detective 
Moustachio is 
a pixelated, 
side-scrolling 
platform 
game 
optimised for 
desktop and 
mobile 99 


Colours 


#E67F46 


#571874 


#FDO481 


#IDB5FD 


Tools 


GSAP. core-js, Babel, 
Amazon AWS 


Fonts 


sbcHBo 
1234565 1850 


FFF Forward font by Fonts 
For Flash is the decidedly 
blocky typeface used for all 
the retro videogame text. 


abcABC 
1234567890 


Montserrat font by Julieta 
Ulanovsky is available via 
Google Fonts, and is also 
referenced within the CSS 
in 400 and 500 weights. 


The cat of Marie-Pierre Tremblay’ escaped again. 
The last time | Found it | almost passed out. 
Another extreme investigation For the Detective Mustachio. 


Top 

A skippable ‘cut scene’ intro 
presents what this HTML5 version 
of the game has in store for 
Detective Moustachio 


Left 

eer er er er ee Essentially an auto-run platform 
game, player controls are kept 
simple on all devices, despite some 
clever upside-down physics at times 


Above 

The select level menu tracks 
progress, showing special coins 
collected and also enabling players 
to plot their own path 


lightbox 


Create a blip effect for 


LightBox 


The Adventure of Detective Moustachio 


hovered content 


Use a visual blip effect to indicate interactive content elements 


1. Initiate the document 
The first step is to define the HTML document - i.e. the 
webpage. This consists of the HTML document container, 
which stores the head and body sections. The head 
section is used to load the external CSS file, and the body 
is used to store the webpage content created in step 2. 
<!DOCTYPE html> 
<html> 
<head> 
<title>Blip Animation</title> 
<link rel="stylesheet” type="text/css” 

href="styles.css” /> 
</head> 
<body> 

*x* STEP 2 HERE 

</body> 
</html> 


2. Page content 

The page content consists of an article and two 
containers. The effect can be applied to any element 
using the 'blipbox' class. Images act in a way that stops 
the blip effect, and this example wraps each image inside 
a span element so the blip effect can work with images. 
<article class="blipbox”> 

<h1>Hello</h1> 

</article> 

<span class="blipbox"><img src="img/photol. 
jpg” /></span> 

<span class="blipbox"><img src="img/photo2. 
jpg” /></span> 


3. CSS: article 


The example article is set to cover half of the vertical 
display space, with margin settings set to guarantee it to 
be centrally positioned. The styling for this element is 
separate and independent from the blip effect, although 
it is required to show how the effect would work with a 
content container element. 
article{ 

display: block !important; 

margin: 2em auto 2em auto; 

border: 1mm solid #000; 

padding: lem; 

width: 50%; 

clear: both; 


J} 


4. Blipbox definition 
Elements using the ‘blipbox' class are required to display 
as inline-block elements using relative positioning. This 


enables any child elements to be placed in relation to 
their position, along with height and width properties 
becoming available. These are all required for the 
animation defined in step 7. 
. blipbox{ 
display: inline-block; 
position: relative; 


} 


5. Blip hover 
A style rule is required to trigger an animation to 
elements using the 'blipbox' class whenever they are 
hovered over by the mouse cursor. This animation is 
applied to a virtual ‘after’ element, hence the use of the 
‘hover’ and ‘after’ CSS selectors. The animation attribute 
specifies the name of the @keyframes animation and the 
duration to play it. . 

.blipbox: hover: :after{ 

animation: blipAnim .7s; 


} 


6. Overlay styling 
The default settings of the 'blipbox' overlay are created 
using the CSS ‘after’ virtual element - as also referenced 
in step 5. This element is required to have default settings 
to define the starting state of the animation. It will cover 
the full area of the element, with semi-transparent black 
background. Opacity is set to zero in order to hide the 
element until the animation is triggered from step 5. 

-blipbox: :after{ 

content: "”; 


2@BEUL STUDIO 


PRESENT 


display: block; 
position: absolute; 
top: Q; 
left: Q; 
background: rgba(@,0,@,.5); 
width: 100%; 
height: 100%; 
opacity: Q; 
3 


7. Blip animation 

The animation is required to move the ‘after’ element 
from the top left corner to slightly behind the top left 
corner while increasing its size. This provides the effect of 
the element increasing its size over the element. Another 
part of the blip effect is how the animation changes the 
opacity from fully visible to invisible. 

@keyframes blipAnim{ 


from{ 
top: Q; 
left: Q; 
opacity: 1; 
} 
tof 
opacity: Q; 
top: -10%; 
left: -10%; 
width: 120%; 
height: 120%; 
3 
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Design, develop and create with 
top Google tools, add glitch 
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Issue 280 


30 best HTML, CSS and JS APIs and 
elements, research your keywords, 
interactive JS charts and What is the 
Web of Things? 


Issue 2/5 


50 must-try tools for designers and 
developers, how to add awesome 
audio, Progressive Web Apps and 

interactive images 


GOT AN APPLE DEVICE? 


Download Web Designer’s digital edition for your iPad, iPhone or iPod touch 


https://apple.co/lhsGYg| toa 


CATCH UP ON ANY ISSUES YOU'VE MISSED BY DOWNLOADING 
QUR DIGITAL EDITIONS https://bit.ly/2rh73Xk 


60 MINS OF FREELANCE VIDEO GUIDES 


Expert tutorials, techniques and inspiration 
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The new rules and top tools for UX, 
5 hot new CSS properties, use the 
CSS Paint API, add particle effects 

and discover JSX 


57 MINUTES OF JAVASCRIPT VIDEOS 


JAVASCRIPT 
WHAT'S NEW? 
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What’s new in JavaScript, say hello 
to Google Flutter, build with CSS 
Grid, work with WebRTC and create 
patterns with CSS 


FREE 2233358 
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SEO Today, 20 hot new libraries and 
frameworks, ten pages of ReactJS 
tutorials, get started with Rust and 

build a WebGL racing game 
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Hot new CSS properties for today, 
build interactive 3D, streamline your 
design workflow with Sketch and 
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FREE oiewaviocos 


ner 


Borns Bessa Cjarery WB savasree Yon 


Q WorPress 
SE ‘CRETS 


‘GURITY SEI 
Essentaltips a keep your instal sae 


WEB AGCESSIBILITY 


How ocresteanal-ncusve 
‘nlinesxperence 


COMPONENTS 


HOW TO GET READY FOR THE FUTURE OF HTML 
. »/ 


Issue 2/2 


Build with Web Components, 
8 WordPress security secrets, 
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28-page design special. Create the 
perfect colour palette, top type 
trends, design and build grid layouts 
and automate your workflow 
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BON 
OYAGE 


SUPERYACHT EXPERIENCE-PROVIDERS ASARO CHOSE GREEN CHAMELEON TO 
CAPTAIN A WEBSITE REDESIGN THAT WOULDN'T LEAVE GUESTS ALL AT SEA 


ASARO 


asaro.co.uk 


by 
Green Chameleon 


craftedbygc.com 


Project duration 
4 months 


People involved 
Nathan Riley 


Design Director 


Tom Anderson 
Creative Director 


Dan Linthwaite 
Art Director 


Jack Harvatt 
Designer 


Jake Whiteley 


Senior Back-end Developer 


Jesper Landberg 


Front-end Developer (Twotwentytwo) 


f you mused on the virtues of professional web design today, a big attraction must 

be variety. Because the internet and digital is now so vital and so ubiquitous in 

marketing, businesses and organisations of all conceivable kinds require quality 

websites. Take, for instance, a company that creates luxury immersive experiences 

on superyachts and megayachts - Asaro. This company designs and delivers 
bespoke, immersive theatrical experiences on an unimaginable scale all around the world. 
So when a client like that seeks out an online revamp, whoever answers the SOS call is in 
for a pretty diverse ride. 

In this instance, the agency it reached out to is well-known within Web Designer pages 
for adapting to any project environment. Bristol-based Green Chameleon is a creative 
production studio that specialises in crafting extraordinary brand experiences that stand 
out, not blend in. Founded in 2012, this agency comprises a growing ‘crew’ of 13 talented 
designers, animators, developers, videographers and account managers. “We were 
approached by Asaro to redesign their website and help them better reflect their position 
within the seven-star luxury world,” recalls GC’s Design Director Nathan Riley. “They 
needed a creative way to visually represent their exclusive service offering, as 
photography was scarce due to the private nature of their events.” 

Asaro’s audiences would be the captains, crew and owners of these immense vessels, as 
well as the guests who commission and enjoy the events they organise. So in order to 
speak their language while being discreet, the designers employed custom CGI renders, 
created to represent the client’s event genres. “Inspired by water drop photography, we set 
out to create a striking and memorable aesthetic that embodied the spirit of each event 
and encapsulates the mystery and adventure weaved into all of Asaro’s offerings.” 


Nathan Riley Dan Linthwaite 


Design Director Creative Director Art Director 
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NAUTICALLY NICE 


Green Chameleon knew that this kind of 
imagery would also tie the theatrical nature of 
the events to the nautical theme of yachting, 
which underpins everything Asaro does. As a 
perceptive agency, GC immediately recognised 
the potential for the project and the 
opportunity to work with a unique client in 
such a unique sector. “To say we were excited 
would be an understatement!” enthuses 
Creative Director Tom Anderson. “The brief and 
scope of work would draw on a huge breadth 
of our skills, allowing us to really utilise our 
team’s creative and technical talents to deliver 
a stunning outcome, which is precisely the type 
of project we love to work 
on.” They actually took 
the initial project call not 
in sunny Bristol but in 
Barcelona while attending 
the OFFF design 
conference. Already 
feeling inspired by the 
show, learning about the 
possibility of working on 
such an interesting and 
fun project got the gang 
particularly excited. 

“After meeting with the Asaro founders and 
the wider team we felt the chemistry was there 
to make something extraordinary, and after 
submitting a proposal for the work we were 
thrilled to find out we’d been chosen to take the 
project on and realise our visions.” 


PLOTTING COURSE 


Making proper contact on their return home 
would be pivotal to touching base and talking. 
As an agency, Green Chameleon isn’t exclusive 
in recognising that communication is key to 
any successful working relationship from the 
off. This catalyst for the delivery of great work 
across any given project has resulted in Green 
Chameleon structuring its design process 
around those principles. 

“We make sure that from the beginning of 
every project, the client is appointed a member 
of our Client Services team to liaise with 
throughout, as well as being given exposure to 
all members of the creative team,” says Nathan. 
“This ensures that creative requirements are 
understood and clearly interpreted our end 
and that any specific questions are answered 
directly and efficiently. We take an integrated 
approach to design and development, and the 
client is involved regularly to feedback over the 
course of the project.” 

With progress made on plotting the overall 
course, the focus could move onto discussing 
concepts. Presenting visual mood boards to 
convey initial ideas for the look and feel, the 
team explored colours and typography, along 
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with page layouts across print and digital. 
While offering the client insight into GC’s vision 
and thought process, this phase also helped to 
hone creative direction in the early stages of 
the project and added context to the initial 
design presentation. “The biggest challenge we 
faced here was working out how to best 
visualise the Asaro offering,” Anderson admits. 
“They operate in such a private and exclusive 
sector, and as a result photography and 
documentation of the actual experiences was 
very limited. It was this challenge that led us to 
create a series of computer-generated images 
to allude to the immensely detailed and 
immersive experiences that Asaro offers.” 

The art direction would 


“THE BRIEF AND draw ona blend of water 


drop photography and 


SCOPE OF WOR K treatrical poster design, 
WOULD DRAW 
ON A HUGE 
BREADTH OF 
OUR SKILLS ” 


with the aesthetic of this 
photographic style 
seeming to fit nicely with 
the project’s obvious 
nautical theme. 


EXTRA HANDS 


Fresh from a conception 
phase that involved the 
majority of the team, it was time to start facing 
the practicalities of building. Two members of the 
GC design team were assigned to handle the 
majority of the design work on the website 
moving forwards. The focus for creating the 
stunning 3D assets would fall on Art Director Dan 
Linthwaite, while Design Director Nathan 
handled the site and interaction design. In 
addition, they actually drafted in a helpful 
Swedish agency friend in the form of 
Twotwentytwo’s Jesper Landberg. “We worked 
extremely closely with Front-end Developer 
Jesper to come up with the best interactions, 
keeping performance in mind throughout,” 
confirms Nathan. “Sometimes this involved 
providing animated demos or specific micro- 
interactions but more often just chatting through 
ideas and seeing how best to achieve them.” 

This kind of extra technical assistance was 
appreciated, seeing as the WebGL underwater 
effect applied to the 3D renders would take 
considerable research and development to get 
right. “The code uses a displacement map to alter 
the intensity of the effect, so with this in mind we 
created several variations of the map to get the 
effect just right. In the CMS we built the ability to 
swap out the masks, meaning it was really 
efficient to try out a new version of the effect, 
cutting out a lot of needless back and forth 
during the testing phase.” 

Built upon a custom WordPress framework, 
the website would eventually be hosted on an 
Nginx/Apache hybrid DigitalOcean droplet 


running Ubuntu 18.04 LTS and PHP 7.2. As a rule > 


Adventure Relfkagined 
i 


& 


Incredible experiences 


Adventure 
without 
boundaries 


Watch our video |» 


Discover new worlds 


Your trusted 
partners 


What will you discover? 


A 
ASARO ee 


NAVIGATION 


Limitless 1 
With 


NAVIGATION 


WHAT WE DO 


Incredible experiences  -> 


Discover new worlds 


ossibilities, spectacular journeys, unimaginable adventures. 


he world at our fingertips, why settle for anything less? 


CONTACT US 


x 


ie) 
¥ 
e 


re Reif 


HOW WE WORK 


Your trusted partners _ 


oo ; 
Asaro’s website draws on 
\ the nautical theme while 
alluding to the mystery 
and adventure on offer 
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Encounters 


BON VOYAGE 


Into the labyrinth 


Enchanting on board entertainment 


AESTHETIC 
AMBITIONS 


“We were driven by the ambition 
to create a striking visual that not 
only told a story but conveyed 
the idea of a mood without giving 
too much away,” describes 
Creative Director Tom Anderson 
when quizzed on the initial 
design motivation. “It was here 
that we drew inspiration from 
theatrical poster design and 
chose CGI over photography, 
because we felt it gave us more 
freedom creatively, as well as 
ensuring consistency moving 
forwards.” This inspiration would 
largely inform the project’s art 
direction by mixing in a big 
dollop of water drop 
photography for good measure. 
Underlining the nautical 
themes associated with a luxury 
superyacht experience, these 
metaphors applied to the 3D 
rendering, and WebGL work 
would also feed into other areas. 
“The website navigation and 
layout of the site was inspired by 
the journeys and maps that are at 
the heart of an Asaro experience. 
The site features an interactive 
dotted line that fills up as the 
user scrolls down the page, 
taking them on a journey of the 
Asaro offering. We also built an 
interactive slider to unlock the 
experiences section that evokes 
a sense of discovery and 
playfulness, a nod back to the 
Asaro experiences themselves.” 


design diary 29 


BON VOYAGE 


EARNING 
STRIPES 


It stands to reason that all 
agencies like to be loved 
and place massive 
emphasis on satisfying 
their clients. The Green 
Chameleon crew are no 
exception of course, anda 
big part of the excitement 
of embarking on a project 
journey such as this is in 
seeing how the site fulfils 
the brief postlaunch. “The 
website has generated 
positive feedback from 
Asaro’s industry peers and 
their clientele,” beams GC 
Creative Director Tom 
Anderson. “The brochure 
was also well received at 
the Monaco Yacht Show, 
proving that the overall 
redesign worked to 
highlight Asaro’s standing 
as a luxury brand witha 
modern approach among a 
field saturated in the usual 
hallmarks of opulence.” 
This was hugely important 
to the client’s overall 
campaign objective, with 
Asaro’s rebranding drive 
being christened at sucha 
Champagne-soaked 
industry event. 

The site’s production 
deadline was timed to have 
the website launched and 
live in order to premiere at 
the show, but perhaps the 
bigger reception has been 
how the online world has 
embraced the work. “We 
were extremely proud that 
the website won numerous 
notable design awards, 
including Site of the Day 
awards from Awwwards, 
FWA and CSS Design 
Awards and features on 
Communication Arts and 
Mindsparkle Mag, as well 
as a Mobile Excellence & 
Developer Award from 
Awwwards, and not to 
mention the very exciting 
FWAWWWARD.” 


30 design diary 


EXAMPLE EXPERIENCE 


Enchanting on board entertainment 


A troupe of mystical storytellers arrives on board to tell the story of Pandora’s box. 


The children help Pandora calm the evil spirits using music and dance, and safely 


return them to the chest. Task completed, the storytellers leave the yacht with a 
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> of thumb, the GC developers used plugins and 
third-party code as little as possible, preferring to 
build purpose-driven solutions in-house. 


JQUERY MAROONED 

“With Asaro being so JavaScript heavy, this led 
us to completely drop jQuery for the project, 
which threw a lot of traditional WordPress form 
solutions out the window,” begins Senior 
Back-end Developer Jake Whiteley. “We used 
the popular Axios library to handle the form 
submission, along with our custom framework 
to implement Laravel-like request validation on 
the backend.” This decision to throw jQuery 
overboard would actually prove to be very 
popular with the developers, becoming a tactic 


they intend to actively pursue on future projects. 


Keen to be as agile as possible, the GC coders 
also tried to keep back and front-end 
development happening in parallel. “Working in 
parallel enables us to respond to site structure 
and content changes as quickly as possible, and 
works well with our interaction design process. 
Plus the transference of ideas from our 
designers’ heads into working animations can 
involve a lot of fine-tuning, and parallel 
development ensures that progress is being 
made, regardless of any blockers. With Asaro 
having such a tight turnaround time, this meant 
front-loading the back-end efforts to ensure that 
the site content structure was in place before 
the main bulk of work started.” 


FIT FOR LAUNCH 


Such a strategy was of course pivotal given the 
tight four-month deadline agreed between the 


two parties. The finishing line would arrive in the 
form of the Monaco Yacht Show, an exclusive 
event for superyacht owners, charterers and 
decision-makers in the yachting and luxury 
industries. The client, Asaro, was naturally 
attending the show, with a view to launch their 
exciting new rebrand. 

“The main challenge was ensuring that 
everything, from the business cards to the 
printed brochure, and most importantly the 
website, were all finalised and perfectly polished 
in time for the show,” says Tom Anderson. “Plus, 
remember that the emphasis on the website’s 
speed and performance was even greater in the 
instance of this project because we were 
constrained by the 3G or 4G connections at sea. 
With the majority of the target audience being 
captains of superyachts, we had to ensure the 
site’s load speeds were fast and optimised for 
mobile and tablet viewing, as well as desktop.” 

Similarly, it was never going to be a case of 
just pushing the finished site out into the ocean 
of the world wide web. As part of sucha 
shipshape relationship, there was a commitment 
to keep the thing afloat after setting sail. “Along 
with managing the hosting of the Asaro website, 
we're also on hand for any additions or 
maintenance that our designers or developers 
are required to provide support with,” Nathan 
concludes. “The site was built on WordPress and 
so the majority of content is editable, which 
purposefully gives the client full control for 
future developments. However, we encourage 
an ongoing relationship with all our clients and 
have already begun discussing with the Asaro 
people about what’s on the horizon next!” 


BON VOYAGE 


SITE 
HIGHLIGHT 


We asked Green Chameleon’s 
Design Director Nathan Riley to 
identify a favourite feature 
from the project 


“The standout feature for us has to 
be the custom CGI renders that 
were created to represent Asaro’s 
event genres. The striking visuals 
have proven to be a powerful 
visual mechanic that has created 
intrigue among Asaro’s 
prospective clients. These assets 
have been a great success, but 
they were also a lot of fun to create 
and we were able to try out some 
new techniques in the process.” 
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Code and Theory 


WHAT 


interactive products, 
campaigns, advertising, 
branded experiences, 
design, branding, user 
experience, interface 
design, graphic design, 
strategy, engineering, Fat eer B 
product UI, website 
design and development, 
motion graphics, rich 
media, and social media 


WHERE 


1 World Trade Center, 
62nd Floor, New York, 
NY 10007 


www.codeandtheory.com 
KEY CLIENTS 

1] adidas 

[2] Comcast 

3] NBC 


4] Nasdaq 


5] American Bar 
Association 


Decoded 


With extensive experience in crafting digital landscapes, Code 
and Theory defines the relationship brands have with their 
customers across multiple channels. Connecting design and 
technology, Code and Theory creates user experiences that 
reinvent how companies can digitally transform 


an Gardner, the CEO of Code and 
De co-founded the agency in 2001 
with his childhood friend Brandon 
Ralph. Dan and Brandon were working in the 
digital department of Draft, where they quickly 
realised that the full potential of digital did not 
exist in CD-ROMs, and so they left to form their 
own agency. 

As arecent graduate of the University of 
Buffalo, Dan had received a BFA in Computer 
Art, while Brandon had dropped out of NYU to 
work full time. Realising that their ideas were 
not being put into practice, they decided to 
start their agency to create transformative 
digital experiences and products. 

Initially working out of a one-bedroom 
apartment on the Lower East Side in New York 
City, they then moved into a Wi-Fi-less, 


abandoned floor of a downtown office building. 


Today, they are headquartered on the 62nd 
floor of the World Trade Center and have 


The Code and 
Theory team 
admiring the 

_ inspirational view 
from their New 
York offices 


additional offices in San Francisco, London 
and Manila. 

Code and Theory craft new digital 
experiences. This level of understanding is 
reflected in the name Dan and Brandon chose 
for their agency, as Dan explains: “The name 
came first from a desire to play in the area 
where creativity and technology intersect. We 
wanted to imply our digital focus without being 
exceedingly overt and having a ‘.com’ in the 
middle of our name. Code and Theory was a 
novel idea in 2001, so it wasn’t hard to get the 
domain. Our name really speaks to why the 
agency was formed and our approach to 
creativity, through strategy and technology.” 

The website that Code and Theory currently 
maintains speaks volumes about not only the 
approach the agency takes to digital design, 
but also its skills with today’s digital tools. 
Michael Treff (President) explains the 
importance of maintaining a powerful and 
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*Built upon a history of using 
digital as the catalyst for larger 
organisational change, the projects 
that enable us to take on thought 
provoking questions that engage 
the development of our capabilities 
are the ones that define who we 
are. The types of work we have put 
out are intentionally very broad 
across verticals and expressions. 
We believe that broadness 
characterises Us more than any 
singular piece of work’? 


Dan Gardner 
CEO and co-founder 
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feyyerry Muller (Caro peratiric Officer), 
‘inancial Operations Managen), Naren,Persaud (Financial 


poathan Chan (PMX) (Controller) andtwo other colleagues 


informative site: “It’s what guides the first 
impression when someone is looking into us, so 
we think it’s very important. Not only is the 
website a window into our agency, employees, 
culture, work and clients, but we also receive a 
lot of inquiries on our site from prospective 
clients, job candidates and press. Truthfully, we 
spend so much more time on our clients’ work 
and their websites than we do our own, but | 
don’t think that’s unique to a company like 
ours, where we put our heart and soul into our 
clients’ initiatives and strive for continuous 
improvement. That said, we have been working 
to overhaul our site and hope to launch a new 
one soon.” 

As an established agency, Code and Theory 
has been able to use its reputation across the 
marketplace to enjoy a steady stream of clients. 
“We're fortunate enough to have built a very 
good reputation in the industry over the years, 
so we receive a lot of referrals from current or 
former clients as well as inbound inquiries on 
our site,” says Dan. “Additionally, we proactively 
identify verticals, clients, and most importantly 
new challenges that we want to work with, as 
well as participate in RFPs (requests for 
proposals) and pitches.” 

With a diverse portfolio of work and clients, 
Code and Theory has been able to choose 
which clients they work with. The selection 
process is detailed, involving a deep dive into 
the client’s needs in order to understand how 
the project benefits both the potential client 
and Code and Theory. 

“Typically, we’re very selective to ensure that 
the relationship with the client is a true fit and 
that we genuinely connect with the company 
and the work,” explains Michael. “We are also 
very realistic about our capabilities and 
resources, So we won’t take on any piece of 


ait ’ from PMX thrash out a new proposal 


work just for the sake of new business. That 
being said, we’ve been extremely fortunate to 
work with clients who trust us with work that 
has allowed us to challenge and expand our 
core capabilities, and we’ve been able to hire 
into those new projects. 

“We like to think of ourselves as ambitious, 
since we do aim pretty high. Not to say we 
won't ever take on smaller projects, but they 
are usually a stepping stone into a larger 
engagement or, more often than not, a project 
or challenge we feel very passionate about.” 

Passion coupled with a deep understanding 
of today’s digital communications channels 
means Code and Theory has been able to forge 
a reputation as not only technical experts but 
also a group of like-minded individuals that 
shape the digital landscapes we all traverse 
every day. 

Dan explains their typical approach to each 
unique account they work on: “As a digital-first 
creative agency, we help our clients across the 
board to drive change and thrive in a time of 
digital disruption - so there really isn’t one 
project that encompasses who we are as a 
company. Built upon a history of using digital 
as the catalyst for larger organisational change, 
the projects that enable us to take on thought- 
provoking questions that engage the 
development of our capabilities are the ones 
that define who we are. The types of work we 
have put out are intentionally very broad 
across verticals and expressions. We believe 
that broadness characterises us more than any 
singular piece of work.” 

As no two accounts are the same, Code and 
Theory is nothing if not flexible in its approach 
to each commission it takes on. David DiCamillo 
(Partner, Operations) explains how they 
manage a varied portfolio of clients: “Timelines 
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“As a Cicital-first creative 
agency, we help our 
clients across the board 
to drive change and 
thrive in a time of 
digital disruption” q , cool 
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Decoded Design 


NBC NEWS 


today.com 


THREE BRANDS, ONE 
SYSTEM: THE NBC NEWS 
DIGITAL REDESIGN 

Code and Theory partnered 
with NBC News, one of the 
oldest and most established 
publishers with over 80 years 
experience, to revamp their 
digital ecosystem. As one 
combined team, they worked 
across a wide range of areas 
to rethink existing paradigms, 
including editorial workflows, 
design and development 
processes, design systems, 
advertising integration and 
technical approach. 

The efforts started small 
and focused on the design 
and launch of four new 
flagship verticals: Mach, 
Better, Leftfield and Think. 
Work then expanded to 
encompass NBCNews.com, 
MSNBC.com and today.com. 
After the success of 
implementing a fresh design 
language and strategy, efforts 
were turned to NBC’s 
Snapchat Show, Stay Tuned, 
the first daily news program 
of its kind. 

As the ever-shifting media 
landscape continues to 
become more digitally 
focused, Code and Theory 
re-evaluated why, when and 
how people are consuming 
news, and sought to find a 
way to retain users’ attention 
among all the bitesize 
content consumption options 
available. To do this, Code 
and Theory built a highly 
flexible set of storytelling 
tools that allowed NBC to 
focus on creating a strong 
editorial voice and bolstering 
confidence in their ability to 
deliver engaging and 
immersive original content to 
users, regardless of medium. 
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XFINITY MOBILE 


xfinity.com/mobile 


When Comcast wanted to enter the fiercely 
competitive mobile provider market, they 
asked Code and Theory to define, design 
and develop their mobile offering. They 
needed substantial support - from refining 
the vision and product concepts, 
establishing key value propositions and 
unique selling propositions to deal with the 
competition and overcome negative 
marketplace perceptions. 

Xfinity mobile’s e-commerce model 
necessitated the creation of an alternative 
product experience to contend with those 
employed by its retail competitors. A 
personalised solution was needed that 


xfinitymdbile 


Creating experiences around 
a brand is a core design skill 
that Code and Theory used 
on their work with Comcast 


would address challenges related to 
in-home activation, custom order logistics, 
procedural implementation of technology 
and evolving mobile standards. Solving 
these issues required that essential 
information was supplied at efficient 
instances, metered through employing an 
elegantly simple, yet remarkably flexible 
unboxing experience. 

In between online order placement and 
successful activation lie a series of logistical 
and user-dependent steps that must be 
correctly completed. Not only does this 
process require itself to be concrete, but the 
brand experience must also follow suit. As 


XFINITY Mopile 
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Introducing a new kind of network 
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Defining and then creating each customer touchpoint 
delivered an integrated customer journey 


reflected by the customer and independent 
feedback, the final design, experience and 
brand integrity scored high marks. The 
unboxing experience itself was met with the 
highest customer acceptance response 
across the entire brand journey. 

This partnership with Comcast extended 
to nearly every touchpoint for Xfinity 
Mobile, defining an end-to-end consumer 
journey. Code and Theory designed and 
developed the complete mobile-first 
experience and created a packaging system 
based on the unique footprint of the phones 
themselves - including a special edition for 
the first 20,000 customers. 
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and process vary greatly depending on the 
scope of a project. However, every single one of 
our projects is structured around a tight and 
dedicated interdisciplinary team we call ‘Pods’. 

“The Pods consist of, but are not limited to, 
skills such as Creative Strategy, Production, 
Content Strategy, Experience Strategy, 
Interaction Design, Visual Design, Data/ 
Analytics and Technology. When the project 
requires additional scale or speciality outside 
the Pod, we add Flex Resources based on the 
requirements of the project phase. Within a 
Pod, we designate someone as the Directly 
Responsible Individual (DRI) to help drive 
leadership and vision across the team to 
prevent ‘design by committee’ decision- 
making, as well as ensure accountability for 
project success.” 

David concludes: “Depending on the scale 
and complexity of a project, the time- 
consuming part can vary. Sometimes that is 
more in the strategic upfront to identify or 
solve the problem, or sometimes it could be in 
the technology if there is some complexity or 
scale in the digital expression of the solution. 
Most importantly, we don’t let process dictate 
an outcome to get to success - we use process 
as a facilitator to success.” 

As an agency that creates digital 
communication assets that both fulfil their 
client briefs and also advance the digital 
environment, Code and Theory has a varied 
toolset it wields with absolute confidence, as 
Chris Delia (Group Creative Director) explains to 
Web Designer: “Our product design work is 
strictly done in the Sketch app, while we 


4 
may 


prototype in InVision or Principle based on the 
fidelity of the prototype that we need to create. 
Sketch actually slowly worked its way into our 
design process a few years ago, after putting it 
through a lot of testing. There was a kind of 
breaking point with Sketch through one 
particular software update in which almost 
everything we were waiting for was 
implemented all at once, so we immediately 
switched over to Sketch. 

“Prior to Sketch, we were using Photoshop or 
InDesign for our responsive design work, which 
sometimes caused friction between projects 
and designer taste. Both Photoshop and 
InDesign did the job just fine, but neither were 
truly built for modern digital design needs. 
There was a grey area missing in the tools we 
were in need of that Sketch filled for us. There 
are a number of reasons why we are sticking 
with Sketch, but what stands out the most is 
how much more productive we have become 
as a team since using it. It has greatly 
streamlined designing across platforms, to 
exporting assets, to working faster with 
developers. Unlike the Adobe suite of products, 
Sketch was built specifically for what we do in 
the product design space.” 

Chris concludes: “We have also done away 
with the time-consuming style guide process. 
which used to eat up a lot of time and money, 
by adopting Zeplin app into our process, which 
has cut the style guide production time down 
by 90 per cent. For content creation, we will 
use the Adobe suite. This is anything from 
photo composites, touch-ups, GIF creation, 
video effects, etc. For 3D we use Cinema 4D 
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Dan Gardner and Brandon Ralph found Code 
and Theory. 
Employees: 2 


Code and Theory develops the first-ever Flash 
Player website, for Sony Classical, and create the 
first Flash videos for Sony Music, setting off years 
of Flash video being the dominant way to consume 
online video. 

Employees: 3 


Code and Theory opens its San Francisco office, 
brings one of the first large-scale content 
catalogues online for Charlie Rose and launches 
the largest online live streaming events in history 
at the time for Dr. Pepper. 
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Working beyond digital, Code and Theory launches 
an animation series in partnership with McCann 
Erickson for the Subway. 


2008 


Launch of The Daily Beast, bringing together core 
strengths - advertising and content delivery - to 
execute the vision of Tina Brown and Barry Diller to 
reimagine online news and advertising. 
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Mashable: first-ever page-to-page continuous 
scroll on (‘The Transporter module’) launches, 
which is now standard behaviour on most 
publishing platforms (a world first). 
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Code and Theory establishes its Industrial Design 
practice, the first digital-first agency to move into 
physical hardware design. 


m 
3 
3 
® 
4 
a 


Launches its first 23 magazine solution (Hearst: 
Cosmo, Esquire, Elle, Good Housekeeping, etc.). 
Launches the first Olympics site for the Sochi 
Winter Games (NBC). Launches latimes.com, at 
the time the largest fully responsive news site in 
the world. 
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Code and Theory is named one of Fast Company’s 
10 Most Innovative Companies in Design for work 
creating publishing platforms. Code and Theory 
acquires Mediacurrent. 
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Code and Theory moves its NY HQ to1 WTC 
Employees: 310 
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Ren Vasey (Content 
Strategist) and Asli 
Aydin (Creative 
Product Strategist) 
discussing their - 
latest client brief <a 


AGENCY 
BREAKDOWN 


PLUS 70 EMPLOYEES AT 
MEDIACURRENT, WHOLLY OWNED 
SUBSIDIARY AGENCY FOCUSED ON 

OPEN SOURCE (DRUPAL) 
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and SketchUp. That said, we are a company that 
embraces change and improvement, so we are 
always open for an evolution in tools.” 

Using the latest tools to advance its vision for 
a client is commonplace across Code and 
Theory. Chris continues: “Whether we are 
considering tightly coupled or decoupled 
architectures, there is a growing tendency for 
websites to embed more of their logic on the 
client side. As such, the frontend technologies 
have to not only accommodate for advanced 
animations, interactions and responsive or fluid 
design in an increasingly complex device or 
browser environment, but they also have to 
account for more elaborate rules and flows. 

“JavaScript is evolving quickly to be on par 
with these expectations: ES6 is introducing 
advanced notions, such as collections, 
promises, advanced inheritance, etc. that bring 
it closer to more traditional languages. This is 
all meant to allow for more complex 
experiences, which in turn means that these 
technologies will be more prevalent in the 
future. Frameworks such as AngularJS and 
React are already used by most major sites, in 
order to capture data from different sources 
and render the right experience for the user. 
Others, such as Three.js or D3.js, help 
developers create visually engaging 
experiences with advanced visual effects.” 

Mobile digital devices have clearly had a 
profound impact on digital communications. 
Laurent Pierre (CTO) explains how Code and 
Theory approaches these technologies: “As a 
pioneer in mobile and responsive design across 
industries, Code and Theory was among the 
first companies to design and deliver large- 
scale, responsive experiences in publishing 
(Los Angeles Times, the largest fully responsive 
newspaper in the United States), e-commerce 
(Moda Operandi, the first fully responsive 


luxury shopping experience targeted at 
high-net-worth clients), and mobile video 
consumption (MobiTV, at the time the largest 
white-label mobile video provider). 

“To us, responsive design is about more than 
just responding to the user’s device. Leveraging 
what we know about a user, we layer onto their 
experience mechanisms of adaptation that 
present the content, services, product offerings 
and resources most relevant to them.” 

As an agency that doesn’t stand still, Code 
and Theory always has an eye on the future, as 
Dan outlines: “Powerful processing and 
accessible cloud computing have also allowed 
us to utilise artificial intelligence in various 
experience formats. Computer vision, machine 
learning, natural language processing, etc. are 
now all available for us to use at the mobile 
device level, and in turn we are able to create 
more tailored experiences for the user by 
bringing together a more contextually coherent 
experience. The access to readily available 
tools such as Google Cloud ML services and 
TensorFlow allow us to train our own models 
and are tools to help us to solve problems and 
create new ways for our applications to interact 
with users. 

“And finally, there has been a great 
innovation in the creative development realm 
where tools such as Cinder, openFrameworks 
and TouchDesigner are paving the way to 
create all sorts of new physical and device- 
based experiences. These software programs, 
along with hardware micro-controllers and 
sensors, allow us to create things that connect 
the digital and physical world in ways we have 
not been able to before.” 

Code and Theory is a multifaceted agency 
that clearly understands what digital 
communications means today. Not content with 
following trends, this agency actively creates 


Tavit Geudelekian (Associate Director of Creative Strategy), 

Alexis Baran (Creative Product Strategist and Designer), 
Alexa Varsavsky (Associate Director of Creative Strategy), 
Erika Templeton (Associate Director of Content Strategy), 
Thomas Strickland (Associate Experience Strategy Director) 
and Nikhil Bhasin (Senior Engagement Manager) at work 


agile spaces that consumers now move through. 
An appreciation of the link between great 
design, storytelling and a command of the latest 
tools ensures the brands it works with are able 
to innovate, astonish and understand their 
customers with well-crafted messages. 

As Dan concludes, Code and Theory is a 
business that constantly pushes at the 
envelope of what digital design means today: 
“We continue to look at ways we can service 
our clients from the perspective of ‘the user’ 
and marrying that to business opportunities, so 
our agency’s only limitation is our own 
creativity and not just tactical capabilities. 

“Change is the constant, so we don’t expect 
tomorrow’s Code and Theory to be the same as 
today’s, and that is what excites us. As for 
exciting upcoming projects, you'll have to wait 
and see.” 
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www.codeandtheory.com 


Founders 
Dan Gardner 


Brandon Ralph 


Year Founded 


2001 


Current Employees 
310 
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What's inside? 


Welcome to our CSS special 
issue. Take a look at what’s 
on offer 


CSS animation 
Explore everything from reasoning and 
planning to implementation 


Build with CSS Grid 
Learn how to build basic grids before moving 
on to more advanced techniques 


Optimise your CSS 
Discover a host of tips and techniques to make 
your CSS blazingly fast 


Style with Sass 
Power up and extend your CSS with the popular 
preprocessor Sass 


Create CSS art 
CodePen engineer Cassidy Williams reveals how 
to create CSS art and offers some useful advice 


Best CSS methodologies 
Ahmed Abuelgasim explains what CSS 
methodologies are and how to use them 


Cutting-edge CSS 
The hot properties and APIs that you should be 
using today. Plus a peek at the future 
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CSS ANIMATION 


feature 


ANIMATION IS AN IMPORTANT PART OF MODERN UX AND IS EASIER THAN EVER 
TO IMPLEMENT WITH GSS. IN THIS FEATURE WE'LL EXPLORE EVERYTHING 
FROM REASONING AND PLANNING TO IMPLEMENTATION 


* @ 
é¢é While it may seem limited or a lesser tool 


when if comes to animation, CSS is actually a really 
powerful tool and is capable of producing beautifully 


smooth 60fps animations 
Steven Roberts, Head of UX, AsembIr.com 


@matchboxherolO codepen.io/matchboxhero 


BEFORE YOU BEGIN 
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Planning your animations and knowing when to use them can be 
just as important as the animation itself 


CSS ANIMATION 
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WHERE TO USE ANIMATIONS 


Animations can become as important to 
your brand as your primary colour or logo. 


HB ANIMATE INTERACTIONS FOR 
BETTER UNDERSTANDING 


Sudden changes to the state of your 
application or website can be jarring and 
can easily cause confusion. Animating 
interactions is a great way to help the user 
understand the change of state. 


DELIGHT YOUR USERS WITH 
MEMORABLE EXPERIENCES 


Animation can be used to provide delightful 
experiences. You don’t need to go 
overboard - something small and subtle can 
create a memorable experience, which can 
keep users coming back. 


INFORM USERS WITH 
PROGRESS INDICATORS 


Progress indicators should be animated to 
inform the user that the system is still 
responding. Users have come to expect 
immediate feedback; when submitting data 
or loading content, a simple spinner can be 
enough to keep their attention. 


Ml USE PERCENTAGES 10 
REPRESENT PROGRESS 


Percentages when used to represent 
progress are a great place to use animation. 
Watching a bar or shape fill up is rewarding; 
visually representing a user’s goal can 
subtly encourage them to complete it. 


DON'T ANIMATE EVERYTHING, 
IT’S NOT NEEDED 


It’s important to know how and when to use 
animation. You don’t want to animate all the 
things and create the mess that GeoCities or 
MySpace became. Animation should be 
used sparingly. 


STORYBOARDING 


QUICKLY PLAN YOUR ANIMATION’S FLOW 


Storyboarding is a technique used in many 
disciplines and industries. It is, for example, 
used for video games, TV shows, movies, 
music videos and any other discipline with a 
narrative and visual element to it. 


[rrr 


WHAT IS STORYBOARDING? 


Storyboards are illustrations of the key 
frames or elements that will make up the 
final works. This allows for ideation of visual 
elements, which would take a lot of time to 
produce in full, to be quickly, easily and 
cheaply captured. 
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WHAT ARE THE ELEMENTS OF A STORYBOARD? 


Panels: Panels are the viewport for your 
animation. Your panels can be any size or 
shape you want, but need to match the 
container size and aspect ratio when you put 
them into the browser. 


Framing and composition: This is 
choosing where in your panel to place the 
elements you’re going to animate. This is 


important for deciding if your panel edge will 
be visible or not. If you don’t want it to be 
visible you need to keep everything in frame 
at all times. 


Arrows: Arrows in storyboarding are used to 
convey movement, showing the direction an 
element will be moving. 
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HOW DO | GREATE STORYBOARDS? 

There are no solid rules when it comes to 
storyboarding, and you don’t need to be able 
to draw either. The idea is to convey the 
timeline using as few sketches as you can. 
You can annotate your panels in order to 
explain certain features of your animation 
where needed. 
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WHY STORYBOARD FOR WEB ANIMATIONS? 


If you’re creating anything more than a 
simple transition, storyboarding the 
elements can save you a lot of time. Before 
you even write any code, you understand 
how to break down the elements involved 
and where each of the key frames of your 
animation should lie on the timeline. 
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Simple storyboard sketch showing how an interaction with a record player could animate 
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CSS ANIMATION 
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CSS transitions can be used to achieve a number of animated 
effects, from a simple colour change to more complex transitions 


WHAT IS A TRANSITION? 


Put simply, transitions are a way to provide 
animation between two property values. For 
the animation to trigger, something needs 
to change in the application or website. 


HOW DO TRANSITIONS WORK? 


Transitions in CSS are simple, we just need 
to choose what elements to transition and 
when. For example, if we have a button and 
we want to change the background colour 
gradually instead of instantly when the user 
hovers over the button, we use a transition. 

.button {background-color: Crimson; 

transition: background-color 5QQms; } 
.button:hover {background-color: DarkRed; } 


TRANSITION SYNTAX 


Transitions in CSS are made up of four 
properties, giving us control over how the 
transition will animate. 


Ml TRANSITION-PROPERTY 


The ‘transition-property’ property enables 
us to choose which properties we want to 
animate. We can transition a number of 
different properties. A full list can be found 
online at https://mzl.la/2BpQJet. 


Mi TRANSITION-DURATION 


The ‘transition duration’ property enables us to 
control how long the transition from one 
property value to another will take. This can be 
defined in either seconds (s) or milliseconds (ms). 


“=” 
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HB TRANSITION-TIMING-FUNCTION 


Timing functions or easing enable us to 
adjust the rate of change over time. There 
are a number of keywords we can use. For 
example, the ‘linear’ keyword will transition 
from A to B at an equal temperament, 
whereas ‘ease-in-out’ will start slowly, speed 
up in the middle and slow down towards the 
end. Custom timing functions can also be 
defined using the ‘cubic-bezier’ property. A 
full list of timing keywords can be found at 
https://mzl.la/2OXGBOe. 


Il TRANSITION-DELAY 


Transitions can be delayed using this property 
and is set using seconds or milliseconds. 


TRANSITION SHORTHAND 


All of the transition properties can be 

combined into a shorthand statement using 

the ‘transition’ property; 

transition: property || duration || 

timing-function || delay; 

transition: background-color 50@ms linear 
250ms ; 

We are free to omit the values we don’t 

need in order to set the defaults. 


COMBINING TRANSITIONS 


You can combine multiple transitions to 
create choreographed animations. Check 
this example: 
transition: 
background-color 50@ms linear, 
color 25@ms ease-in 250ms; 


WHAT ABOUT BROWSER 
SUPPORT? 


Support for transitions and animations in 
modern browsers is really good. Everything 
from Internet Explorer 11 or above is going 
to support the majority of the code needed 
for animation. 

There are exceptions with some of the 
newer animation properties; CSS Motion 
Path, for example, or when using SVG or 
custom properties (CSS variables) as part 
of the animation. 


DO 1 NEED 10 USE 
PREFIXES? 


Prefixing for the most part is probably not 
needed unless we need to provide support 
for older browsers - Internet Explorer 10 
and below. 

There are several ways we can prefix 
code if needed. Auto-prefixer 
(autoprefixer.github.io) is a really useful 
tool that can be used as part of a build 
process or manually at the end of a project. 
It enables us to configure the browser 
support you need, then it will automatically 
prefix our code where needed. 

We can also check the support for any 
property using the amazing tool ‘Can | Use’ 
(caniuse.com). Simply type in the property 
we want to use and see which browsers 
are supported. 


CSS KEYFRAMES 
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CSS keyframes are used for complex or repeatable animations 


WHAT IS A KEYFRAME ANIMATION? 


Keyframe animations in CSS enable us 
to define multiple property values to 
animate between. Keyframe animations 
can be reused and repeated, unlike 

CSS transitions. 


lM DEFINING KEYFRAME ANIMATIONS 


CSS keyframe animations are defined using 
the ‘@keyframes’ syntax. This works much 
like a media query where we nest elements 
inside of the ‘@’ statement. Inside the 
keyframe declaration we have two options: we 
can use the keyword ‘to’ and ‘from’ or we can 
define our timeline using percentages. 


Mi KEYWORD ANIMATIONS 


When the animation we're creating only has 
two points to animate between, we can use 
the ‘to’ and ‘from’ syntax, in fact we can use 
just ‘to’, providing the original property 
value is set on the element we're going to 
be animating. 
#record { 

transform: rotate(Qdeg) ; 


animation: rotate 1s; 


@keyframes rotate { 
to { 
transform: rotate(36@deg) ; 


Ml PERCENTAGE ANIMATIONS 


When creating animations where we need 
to define more than one point to animate, 
we Can use percentages. This enables us to 
have precise control over our animation. 
@keyframes flash { 

25% { opacity: 
27% { opacity: 
29% { opacity: 
31% { opacity: 
75% { opacity: 


APPLYING OUR ANIMATION 


Animation in CSS has a number of 
properties we can set in order to have 
precise control over the playback of our 
keyframe animations. Some, like ‘animation- 
duration’, ‘animation-delay’, ‘animation- 
iteration-count’, ‘animation-play-state’ and 
‘animation-name’ are all fairly self- 
explanatory, while some of the other 
properties can be a little trickier to learn 
and utilise to their full potential. 


HS ANIMATION-TIMING-FUNCTION 


Timing functions in animation are the same 
as transitions whereby we can use either 
keywords or set a custom timing function 
by using the ‘cubic-bezier’ value. A full list 
of timing keywords can be found at 
developer.mozilla.org/en-US/docs/Web/ 
CSS/animation-timing-function 


CSS ANIMATION 


Hi ANIMATION-DIRECTION 


When applying our animations, we have the 
ability to play them back in a number of 
ways. The default value is ‘normal’, which 
will play the animation forwards. We can 
also play the animation in reverse or 
alternate the animations playing forwards 
and backwards. 


Hl ANIMATION-FILL-MODE 


The fill mode value enables us to choose 
what should happen at the end of an 
animation to the value that we have 
changed. For example, setting the value to 
‘forwards’ will keep the property values 
from the end of the animation, whereas the 
default value ‘none’ will return the elements 
to their original state after the animation 
has finished. 


ANIMATION SHORTHAND 


All of the animation properties can be 
combined into a shorthand statement using 
the ‘animation’ property. We are free to omit 
the values we do not need and want to leave 
as the default values. 


animation: duration || timing-function | 
delay || 

iteration-count || direction || fill-mode || 
play-state || name; 


animation: 50@ms linear infinite flash; 
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CSS ANIMATION 


ANIMATION PERFORMANCE 


Animating too much or too many properties will cause animations to stutter 
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SVG Animated.Birds 


Page speed and performance is an 
important aspect of any application or 
website. If you are using animation as part 
of your project, it can be a good place to 
start when trying to optimise performance. 

Firstly you can check that you’re not 
using too many animations all at once on 
the page: as well as being bad for 
performance, it is also bad for your users’ 
experience. Multiple animations on different 
parts of the page will be fighting for their 
attention as well as potentially causing 
performance issues. Being aware of the 
number of animations will help to address 
both of these potential issues. 


HH AVOIDING JANKY ANIMATION 


In order to achieve a smooth 60fps 
animation, the browser has only 16.7ms 
(1000ms/60) to achieve all of the work that 
needs to be done per frame. If the browser 
can’t complete all of the operations needed, 
it will stop and move on to the next frame, 
starting the calculation and redrawing 
process all over again. This is when we start 
to see dropped frames, causing janky or 
stuttering animations. 

While the list of animatable properties is 
extensive, at the moment we can only safely 
animate a handful of these properties to 
keep within the necessary 16.7ms. These 
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properties are ‘transform’, ‘opacity’ and 
also ‘filter’. 

The reason for this is that animating any 
other property will cause the browser to 
have to repaint the page, and this is an 
expensive process in terms of performance 
and will likely take longer than 16.7ms to 
calculate and draw each change. 


i GIVING THE BROWSER 
A HELPING HAND 


We can also utilise the ‘will-change’ 
property in order to give the browser a 
heads up that this property is going to 
change. This enables the browser to 
perform some optimisations before your 
animation even starts. 


OTHE FUTURE OF WEB ANIMATION 
PERFORMANCE 


The new Firefox Quantum project is taking 
amazing strides towards making every 
animatable property perform well, as well 
as many other improvements to rendering 
content on the web. 

It’s also worth noting that the newest 
versions of the iPad will play animations 
back at 120fps, which will reduce the time in 
which the browser has to calculate and 
paint each frame to 8.35ms. 


TIMING AND 
CHOREOGRAPHY 


Utilising the correct timing and delays will 
produce much better-looking and 
easier-to-comprehend animations. When 
animating any elements, it’s important to 
choose a duration that is appropriate to its 
context. For example, an animation that’s 
applied to a button interaction should be 
short, usually less than a second. 

Utilising long animations for common 
interactions is tedious and annoying to the 
user and can make your application or 
website feel sluggish and slow. However, 
providing an animation duration that is too 
short can cause confusion and provoke the 
wrong emotions and feelings for your 
audience. Once you have chosen a 
comfortable animation duration, you 
should use this in every aspect of your 
website or application. 

When animating, multiple elements or 
property delays should be used to 
enhance comprehension. It’s much easier 
to see what’s happening in an animation 
when one thing happens at a time instead 
of all at once. 


ANIMATING SVG 
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SVG enables us to create intricate drawings and images, where all of the elements 
inside SVG are also animatable using CSS 


CSS ANIMATION 


SVG has many benefits - its vector nature is 
great, and we don’t get any of the problems 
we get with bitmap images when displaying 
an image too big or too small or on devices 
with differing DPls. SVG is also much 
smaller in size. SVGs are basically 
instructions for the browser to draw the 
image contained within. 


i HOW DO | ANIMATE SVG? 


Animation in SVG works exactly the same 
way as it does with any element on the 
page. We need some way to target the 
element we want to animate, and then apply 
the animation. 
svg rect { 

animation: 2s linear infinite rotate; 


Mi GOTCHAS 


The main way in which animating SVG 
elements differs from regular elements is 
the ‘transform-origin’ property. Normally we 
would use percentages or keyword values 
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in order to set the point at which a transform 
operation takes place. 

transform-origin: 50% 5%; 

transform-origin: center center; } 


So if we can’t use keywords and can’t use 
percentages, how do we set our transform 
origin? The answer is to use pixel values. 
Further complications come into play 
because, unlike regular elements that would 
measure the pixels from the top left corner 
of itself, SVGs will measure from the top left 
corner of the parent SVG canvas. Jack Doyle, 


author of the GreenSock Animation Platform, 


has written a blog covering this topic in 
detail on the CSS Tricks blog; css-tricks. 
com/svg-animation-on-css-transforms 


ml BROWSER SUPPORT 


CSS animation when used with SVG requires 
the SVG to be inline in the page for the 
majority of browsers. This means we can’t 
use the image tag to include our SVG and 
perform animations; we need to have our 
SVG inside an SVG tag on the page. 


SVG Snow 


USING CUSTOM PROPERTIES 


CUSTOM PROPERTIES, OR CSS 
VARIABLES, CAN BE USED TO 
CREATE CONFIGURABLE PARTS OF 
YOUR ANIMATION 


sss - 
PREFERS REDUCED MOTION 


Animations and movement can cause 
motion sickness in some users. We can use 
custom properties in order to effectively 
remove animations for users who have 
indicated preferring reduced motion. 
sroot { 
--timing: 50Qms; 
3 
@media (prefers-reduced-motion: reduce) { 
--timing: Q; 
} 
-animate { 
animation: my-animation var(-- 
timing) linear; 
3 
By changing the timing to ‘O’”, we stop the 
animation from running when the user 
has requested it. While this media query 
isn’t yet widely supported, it is by iOS. 


CHANGING OTHER PROPERTIES 


We can use custom properties to define 
other parts of our animation, such as the 
colour or size and use. This is useful if we 
have a part that’s configurable and we’re 
using that property as part of an animation. 


Bubbles 
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CSS ANIMATION 


BRING IT ALL TOGETHER 
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In this tutorial we'll look at how we can combine all of the elements we’ve 


covered in the article into one single animation 


The initial state of the animation, with the arm placed off the record 
and the record not moving 


Once our arm is in position and the record has rotated slowly once, we 


The first thing that happens is the arm moves into position over the 
record, and halfway through this animation the record begins to spin 


When the user stops interacting the record spins backwards slowly and 


then spin the record faster, infinitely 


We'll be creating a record player animation 
where the arm of the record player moves 
into position over the record, as well as 
rotating the record itself at two different 
speeds. We'll create the animation using 
SVG transitions and keyframes, and we'll be 
using custom properties in order to make 
our animation configurable. 


CREATE AND EXPORT OUR SVG 


The first step is to create and export our 
SVG code. You can do this using many 
different graphics editors (the example is 
Sketch for Mac). The shapes being used are 
simple - mostly straight and poly lines 
combined with circles. We want to create 
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the SVG in the initial state of our animation. 


the arm moves back to its original position 


OPTIMISE OUR SVG 


When we have the exported code from our 
editor we need to optimise that code to 
make it easier for us when creating our 
animation. Firstly we'll run it through 
SVGOMG (jakearchibald.github.io/ 
svgomg) making sure to only optimise the 
parts we need. Once we've done this we'll 
paste our code into CodePen and create 
some basic page styles. We'll be using Sass 
to take advantage of the nesting capability. 


https://bit.ly/2PZVbd6 


EDIT BY HAND 


Next we will need to edit our SVG by hand. 
We are going to need to remove any inline 
transforms on elements that we are going 
to animate into our CSS. Doing this will 
make it easier to animate, because we'll be 
able to see all of our transform properties in 
one place. 
#arm-top { 

transform: translate(9.5px, 3px) 

rotate(-90deg) ; 


transform-origin: -1px 11px; 
3 
#record-container { 
transform: translate(7px, Q) 
rotate(@deg) ; 
transform-origin: 24px 24px; 
3 
#record { 
transform: rotate(Qdeg) ; 
transform-origin: 24px 24px; 
z 
https://bit.ly/2r7alya 


ANIMATE THE ARM 


We can achieve most of what we are trying 
to do using transitions. We will start with 
the record arm and animating the arm into 
position over the record. To do this we will 
need to rotate the arm of the record from 
‘-9Odeg’ to ‘Odeg’. In order to transition 
rotation we need to use the transform 
property. This means we also need to keep 
any other transform properties the same 
when changing the rotation. 
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#record-svg:hover, #record-svg:active, 
#record-svg:focus { 


#arm-top { 
transform: translate(9.5px, 
3px) rotate(@deg) ; 
transition: transform 1s; 


} 
https://bit.ly/2Qkew7Y 


Mi SLOWLY ROTATE THE RECORD 


Next we can use another transition to 
complete the first, slower rotation of our 
record. To do this we will need to target the 
container and apply our transition code, 
much like we did in the previous step, 
except this time we will be adding a delay of 
a quarter of the time it takes for the arm to 
move into position. 
#record-svg:hover, #record-svg:active, 
#record-svg:focus { 


#record-container { 
transform: translate(7px, 2) 
rotate(360deg) ; 
transition: transform 
1s 50@ms linear; 
3 
3 


https://bit.ly/2Rcpw4r 


Mi SPEED UP THE ROTATION 


In order to speed up the rotation, and for it 
to repeat infinitely, we’ll need to use a 
keyframe animation. The animation we need 
to create is simple, we just need to rotate 
the record 360 degrees. 
@keyframes rotate-record { 
to 
{ 
transform: rotate(36@deg) ; 
} 
3 
Then when we're applying our animation, 
we need to make sure to set the delay 
correctly so our animation starts at the end 
of the container stopping. 
#record-svg:hover, #record-svg:active, 
#record-svg: focus 
{ 
#record { 
animation: 40@ms linear 
125@ms infinite rotate-record; 
} 
3 


https://bit.ly/2zsKhCe 


ml IN REVERSE 


Everything is working now and our 
animation is complete - until the interaction 
stops. At that point, both the arm and record 
stop animating and jump back to their 
Original positions. This is where the setup of 
our SVG is important. The record element 
itself sits inside of a container. By animating 
the container using a transition we can also 
perform another transition in reverse with 
just a couple of lines of code. 


#arm-top { 


transition: transform 50Qms; 


} 


#record-container { 


transition: transform 50@ms linear; 
} 
https://bit.ly/2TJMhhM 


mi GUSTOM PROPERTIES 


Now we’ve got our complete animation, we'll 
make it configurable with custom properties. 
We can do this by setting our custom 
properties on the root element in our CSS. 


:root { 
--background-color: #2A2A2A; 
--record-colour: white; 


--record-size: 12rem; 


We can then apply them to the property 
values where needed, making sure to 
provide a fallback for each one. 
.container { 
max-width: var(--record-size, 15rem); 
max-height: calc(var(--record-size, 
15rem) * 1.166); 


We can also use custom properties as part 
of ‘calc()’ functions, which is particularly 
useful for sizing and for creating durations 
and delays. 


https://bit.ly/2zq9xck 
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Mi CONFIGURABLE DURATION 


We can utilise the ‘calc()’ function in order to 
make the animation duration configurable. 
Firstly we need to set a new custom property 
for our duration with a value, in seconds. We 
can then use this value in order to set all of 
the other animation time values. 
transition: transform 50Qms; 
Given the custom property ‘—animation- 
duration’ being two seconds becomes; 
transition: transform calc(var(--animation- 
duration, 2s) / 4); 
By doing this for every time value in our 
animation, we can control the speed of the 
entire animation by simply changing the 
custom property at the top of our CSS. 
https://bit.ly/2RjsULb 


HE OPTIMISATIONS 


Now we can add our accessibility options for 
‘prefers-reduced-motion’ and add the 
‘will-change’ property to all of the elements. 


https://bit.ly/2SaFfRJ 
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C55 GRID ENABLES YOU 10 DEFINE ADVANCED CONTENT LAYOUT FOR 
RESPONSIVE DESIGN WITHOUT THE COMPLICATED FORMATTING 


éé CSS grid offers more flexible definitions for 
content layout. Unlike older alternatives, such as table 
layouts and floating elements, grid has been designed 
to benefit SEO, responsive design and accessibility 99 


Leon Brown 
twitter: @LeonBrown 
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WHY YOU NEED CSS GRID IN YOUR LIFE 


CSS Grid lets you create advanced layouts while focusing on the user 


—— 


To some, a wireframe may seem 
like a laborious and unnecessary 
task that can drag out a project 
with no real long-term benefit. 
Jumping straight into a design 
may seem like a compelling and 
rewarding alternative, but by doing 
so you could be forgetting the 
most important thing of all when 
creating a design: the user. 

The ideation and wireframing 
stage of any design enables you 
to consider the layout and user 
experience from the very start of 
your project. By only using the 
core components for your web 
design — header, footer, 
navigation, buttons — to begin 
with, you can always ensure your 
focus is on the user, without 
getting distracted by which colour 
palette you had in mind. 

There are plenty of tools out 
there to get started with 
wireframing, but today many web 
teams use Sketch. Its usability and 
unrivalled speed make it the 
obvious choice. 

So a project has been set up and 
a font has been chosen for the 


BROWSER SUPPORT 


Grid and flexbox were not 
always part of the CSS 
specification, meaning that 
there is no support in older 
browsers. All of the major 
browsers have supported the 
full grid specification since 
2017. The main concern for 
compatibility are Microsoft 
browsers (IE and Edge), which 
have high usage in businesses. 
They introduced limited 
support in Internet Explorer 
10, but full support has only 
been available since Edge 16. 


wireframe, but what should be 
added? This is where the core 
components are decided and 
added to the wireframe — the 
components that the design can’t 
live without. 

Starting with the header, what 
do we need if we are approaching 
this project mobile first? Is the 
logo the main focus? Should we 
consider using a ‘burger’ 
navigation to ensure best practice? 
These are the questions any 
designer should keep asking 
themselves throughout the 
process when building their 
wireframe components. 

The first steps should be to 
create an artboard for mobile or 
desktop, and begin to build the 
components on the page with 
simple shapes in order to define 
the outline of the components like 
the header. To highlight areas of 
importance and interactivity in the 
wireframe, use varying shades of a 
monochrome colour palette while 
wireframing. For example, within 
the header, inserting a logo and 
navigation in a bold blue colour on 


a pastel blue background will 
present them as the important 
elements in your component. 

It’s also important to consider a 
grid system, padding and margins 
as soon as possible when defining 
the wireframes. Showing rulers in 
a Sketch file and clicking on these 
rulers (down the left and above 
your artboard) will create guides, 
which in turn saves a lot of stress 
when sharing designs, as 
consistency is key when defining 
a design system. 

When the essentials are in place 
for one component, move onto the 
next. Only include what you need. 
Keep in mind the bare minimum 
that is needed for the user to 
complete their task. Planning to 
use these components in more 
than one artboard? Why not create 
a symbol. Symbols act as super- 
components that update all the 
artboards they currently sit in. To 
create a component, right-click an 
element and choose ‘Create 
symbol’. This will be saved into one 
packaged item manageable from 
the symbols page. 


MODERN FEATURES FOR 
MODERN BROWSERS 


Subitem 


feature 


CSS Grid 


WHAT ABOUT 
FLEXBOX? 


Es 


Flexbox is another option that 
can be used to control the 
flow of content. The main 
difference is that it was 
created specifically for 
one-dimensional content flow, 
whereas grid is used for 
two-dimensional purposes. 

While flexbox gives you the 
option of controlling the 
horizontal or vertical layout, 
CSS Grid controls both 
horizontal and vertical layout. 
In effect, you can consider 
CSS Grid to be the next step 
up from flexbox. 

Although the grid feature 
can be used to define any 
type of layout, flexbox 
provides the advantage of 
keeping your CSS simpler for 
one-dimensional layout. It’s 
worthwhile keeping in mind 
that requirements may 
change or expand to include a 
requirement for two- 
dimensional layout. 

An example of this would be 
using a vertical one- 
dimensional layout for 
small-screen devices, and 
using a two-dimensional 
layout for view on big screens, 
such as a desktop. Flexbox 
does not offer the ability to 
adapt for this requirement, 
whereas grid does. 

Both flexbox and grid are 
compatible with the content 
ordering feature, so changing 
from flexbox to grid should 
not be a significant problem if 
it's required. 

Make sure that you keep 
styling in a stylesheet 
separate from the main HTML 
content if you want to 
maximise maintainability. 
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ESSENTIAL’ 
PROPERTIES © 


THE PROPERTIES YOU NEED TO KNOW 
FOR CREATING GRID-BASED LAYOUTS 


EE ———___ 
GRID-AUTO-FLOW 


Enables you to define the flow 
of grid cell layout using 
horizontal ‘column’ or vertical 
‘row’, making the grid act 
similar to a table. 


GRID-GAP 


Apply this to the grid 
container to set spacing 
between each grid cell. The 
default sets no spacing 
between cells. 


GRID-COLUMN 


Sets the specific column to 
place the grid cell. Use this to 
target specific cells via class, 


ID or selector. 


Sets row location to place the 
grid cell. Use this to reference 
specific cells via class, ID or 
selector. 


GRID-AREA 


Defines the grid area for a cell 
to cover using co-ordinates in 
the format startX/startY/endX/ 
endY or a cell reference name. 


GRID-TEMPLATE-AREAS 


A more advanced method for 
defining the grid layout using 
grid-area reference names 
given to the created content 
cells. 


GRID-TEMPLATE-ROWS 


Used to specify 
measurements for individual 
rows within the design of the 
grid layout. 


GRID-TEMPLATE-COLUMNS 


Similar to grid-template-rows, 
but used to specify 
measurements for individual 
columns within the design of 
the grid layout. 


GREATE A QUICK BASIC GRID 


Examples of using CSS Grid to create a series of simple layouts 


1. HTML CONTENT 


To start, link the external CSS file, e.g. <link 
rel="stylesheet" type="text/css” href="1.css" />. 
Everything CSS Grid goes in the <body>. Three 
sections are defined - one for each example 
grid. The data-grid attribute is used to provide 
each section with a unique reference value that 
can be used by the CSS. Each child element of 
the grid will be become a cell of the grid. 
<section data-grid="1"> 

<div>1</div> 

<div>2</div> 

<div>3</div> 
</section> 


<section data-grid="2"> 
<div>1</div> 
<div>2</div> 
<div>3</div> 
</section> 


<section data-grid="3"> 
<div>1</div> 
<div>2</div> 
<div>3</div> 
<div>4</div> 
<div>5</div> 
</section> 


2. GSS GRID DEFINITION 


Create a file called '1.css’. This step sets 
formatting to be shared by all elements using 
the 'data-grid' attribute. Display is set as grid to 
make their first-level children act as the cells of 
the grid. Default background colour and text 
alignment for these grid cells are also set. 
[data-grid]{ 
display: grid; 
margin-top: 2em; 
padding: lem; 
grid-gap: lem; 
3 


[data-grid] > * { 
background-color: #fff; 
text-align: center; 
border: 1px solid #000; 


3. HORIZONTAL COLUMNS 


The columns template for grid 1is set to contain 
three cells. Measurements for the cells use the 
fr unit to describe their width as a fraction of the 


available space, so the middle column will be 
three times wider than the outer columns. 
[data-grid="1"] { 

background: red; 

grid-template-columns: ifr 3fr 1fr; 


4, VERTICAL ROWS 


The second grid is set to display with a vertical 
cell flow. As this is not the default flow for grid 
cells, the grid-auto-flow attribute is set to 'row’. 
The same approach is used to define the height 
of each row, using the fr unit measurement. 
[data-grid="2"] { 

background: green; 

grid-auto-flow: row; 

grid-template-rows: lfr 3fr l1fr; 


5. MIXED GRID 


The final grid is presented with a layout allowing 
for both vertical and horizontal content. Auto 
flow is set to ‘column’, setting the cells to flow 
horizontally. The first cell is set to span over two 
grid rows, guaranteeing the cells to flow 
horizontally over two rows. 
[data-grid="3"] { 
background: blue; 
grid-auto-flow: column; 
3 
[data-grid="3"] > *:first-child{ 
grid-row: span 2; 


GO TO THE NEXT LEVEL 


CSS Grid 


An alternative approach to defining a grid layout by using reference names for content elements 


1. DOCUMENT INITIATION 


First define the webpage as a HTML document 
and link the external CSS stylesheet, e.g. <link 
rel="stylesheet" type="text/css" href="2.css" />. 
Everything CSS Grid goes in the <body>. 


i 2. GRID HTML 


The grid must be defined in a way that will allow 
its container and child cells to be referenced by 
CSS. This example uses semantic tags that have 
a unique name for each content area, although 
you could decide to use class names, data 
attributes or IDs as an alternative. 
<article> 

<section>Content</section> 

<header>Header</header> 

<aside>Side</aside> 

<footer>Footer</footer> 

<nav>Menu</nav> 
</article> 


Hl 3. GSS: REFERENCE NAMES 


Create a new file called '2.css’. This step 
references each of the content elements inside 
the article container and uses the grid-area 
attribute to provide a unique reference name. 
This reference name will be used in the next step 
when defining the layout template for the grid. 


article > aside { grid-area: side; } 


article > nav { grid-area: menu; } 
section { grid-area: content; } 


article 


> 
> 

article > 
> header { grid-area: header; } 
> 


article > footer { grid-area: footer; } 


i 4. GRID SETUP 
The article in the HTML is used as the grid 
container. The grid-template-areas attribute 
defines the layout of the grid using the grid-area 
reference names identified in step 3. The setup 
works like cells within a spreadsheet, where 
names that are vertically or horizontally adjacent 
create one grid cell area. 
article { 

display: grid; 

grid-gap: .5em; 

grid-template-areas: 

“menu header header header” 

“menu content content side” 
“menu content content side” 


“menu content content side” 


header 
content 
content 
content 


footer 


5. CONTAINER FORMATTING 


With the grid layout now in place, the next step 
is to define additional presentation for the grid. 
This step sets the grid container’s colours, along 
with the maximum width and minimum height. 
Some padding is also added to enable the grid 
to have a surrounding border space. 
article { 

max-width: 25em; 

min-height: 2Qem; 

background-color: #333; 

color: #444; 

padding: lem; 

font-size: 150%; 


6. CELL FORMATTING 


The final step is to set the formatting of the grid 
cells. This tutorial sets colours for the text and 
background, but you can add other CSS 
presentation attributes to meet your 
requirements. No new rules or limitations apply 
to grid cells, meaning you are still able to use 
your existing knowledge of CSS. 
article > *{ 

background: #fff; 

color: #00Q; 


header 


content 


footer 


header header 
content 
content 
content 
footer footer 


MEASUREMENT 
PROPERTIES 
AND ATTRIBUTES 


The grid feature offers many ways to define 
measurements for its cells, enabling you to 
define both fixed and responsive layouts 


The fr measurement unit specifies the 
width or height of a grid cell as a fraction of 
the remaining space. 


Sets the width or height of a cell to cover 
more than one cell space within the 
defined grid template. 


REPEAT 


Used as shorthand to repeat the same 
width or height definition across multiple 
cells within the grid template. 


MINMAX 


Allows you to define the minimum and 
maximum height or width of a grid cell; 
useful for controlling responsive layouts. 


PX/CM/MM/EM 


Fixed unit measurements can be used in 
combination with fr, which results in 
fractional spaces being measured from the 
remaining space. 
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CSS Grid 


WHAT ELSE D0 I NEED 17 KNOW? Six tips to get more from CSS Grid 


mi 1. LAYERING 


The z-index attribute can be applied to 
individual grid cells to allow them to be layered 
above or below other grid cells. 


i 2. ALTERNATIVE LAYOUTS 


Make use of CSS media queries to modify or 
redefine grid definitions for different screen sizes 
or media types. 


3. TEMPLATE ATTRIBUTES 


Properties whose name begins with ‘grid- 
template’ are used to define the design of the 
grid layout. 


4. CELL ATTRIBUTES 


Properties that don’t start with ‘grid-template' 
are used to place cells within the grid. 


WHAT ABOUT 
ACCESSIBILITY? 
—_———————__ 


The same ability of grids to re-order content 
for responsive purposes can also be applied 
to increase accessibility. Whether it’s 
changing or extending the stylesheet, or, 
with the help of JavaScript, users can be 
given options to choose the order that best 
suits what they need. 

In its simplest form, this can be achieved 
by attaching additional stylesheets to load, 
possibly as a result of settings stored ina 
cookie, local storage or on the server. More 
advanced accessibility control can be 
executed as a result of interactions with a 
HTML form that triggers JavaScript to adapt 
the grid ordering. 
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5. CONTENT ORDERING 


Grid allows you to order content independently 


from the HTML definition, enabling you to 
optimise HTML for SEO while also providing 
control for responsive design. 


6. MAINTAINABILITY 


Use the grid flow attributes to allow future 
adaptions of the HTML to automatically adapt 
the grid without needing to update the CSS. 


1 


overlay 


footer 


>Content</ 
>Header</ 
>Side</ 
>Footer</ 
>Menu</ > 


TEMPLATE VS GONTENT the two parts of the grid 


Grids consist of two parts - templates and 
content. This enables reusable grid layouts that 
can be called from HTML markup using tag 
names or attributes such as class or ID values. 
As well as being a benefit for responsive layouts, 
this reusability has many advantages for agile 
workflow strategies involving change 


management. Once a template has been 
defined, you are able to apply it to a container 
element that stores content elements. Content 
flow within the grid appears in accordance to the 
settings of the grid template, which allows for 
custom rules to be applied directly to individual 
content elements. 


Template 


Head 


Content—e 


Content 


Content —e 


e— Content 

Content 
e@— Content 
e— Content 


Footer 


e—Content 


e—Content 


e—Content 


CSS Grid 
title title 
main 
main 
footer 
footer 

Use CSS grid as a tool for agile project development 
The ability of grid to keep layout against unexpected changes that by providing full control to the using nested grid, it is the feature’s 
definition entirely independent from could otherwise escalate to derail designers for defining the layout ability to adapt parent grids without 
the HTML content is not only good your schedule and budget without concern for the HTML. concern for their content that will 
for responsive design and SEO but planning. An example of this would Future additions to the grid benefit your ability to be agile by 
also for project management. A lot be a change request to alter the feature will allow advanced layouts _ eliminating risk and reducing 
of talk exists about agile position of content, which would to be defined with lower complexity. testing requirements. In addition, 
development being a project traditionally require you to modify One example of thisisthe proposed the automatic management of 
management methodology, butit’s both the CSS and HTML. This can subgrid feature, which will enable subgrids by the browser will help to 
as much about how you implement _ be problematic for large projects cells to act as a subgrid that keep formatting simple and 
your design and its code. where design and content are automatically inherits the required consistent across all developers, 

By using CSS grid effectively, you responsibilities of separate people cell layout from its parent. While providing better ability to adapt 
are able to protect your project or teams. Grid resolves this issue subgrid layout is already possible your CSS whenever required. 


W36 SPECIFIGATION GRID POLYFILL GRID LAYOUT EXAMPLES 


w3.org/TR/css-grid-2 smashingmagazine.com/2018/07/ github.com/FremyCompany/ gridbyexample.com/examples 

The latest details of the CSS grid css-grid-2 css-grid-polyfill A selection of pre-made grid 

specification. Includes details Learn about the proposed subgrid One of several polyfills available layouts that you can use to 

about proposed features, suchas feature in more detail, complete to bridge compatibility with older kickstart your web design or 

subgrid that willbe implemented — with full examples for using the browsers. Make sure to take alook content section layout. Examples 

by future browser releases. proposed specification. at the full description of its include both simple and advanced 
capabilities and limitations. layout designs. 


CSS Grid Layout Module Level 2 
i sporshee 


The examples 


Be ee ee 
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'G) G i ft OfSs p e e d Website Speed Test Tools Techniques Optimization Service 


Home > Tools > Browser Caching Checker 


Browser Caching Checker 


http://www.gmx.de CHECK 


URL: 
Cached Files: 


https://js.ui-portal.de/homepage/cs/90/1.4/gmx/home/homepage.min.css @ajaaya> 
https://js.ui-portal.de/homepage/cs/90/1.4/gmx/home/adaptive-2col.min.css @igayap 
https://js.ui-portal.de/homepage/cs/90/1.4/gmx/home/adaptive-3colborder.min.css @iaays) 
https;//js.ui-portal.de/homepage/cs/90/1.4/gmx/home/adaptive-4colborder.min.css @ijgays) 
https://js.ui-portal.de/homepage/cs/90/1.4/gmx/home/adaptive-4col.min.css @aays) 
https://js.ui-portal.de/homepage/cs/90/1.4/gmx/home/adaptive-left.min.css @GEays> 
https://i0.gmx.net/image/814/31008814,pd=1.jpg G@aaays> 
https//i0.gmx.net/image/082/33270082,pd=2,h=250,w=300.jpg @iaays> 
https://js.ui-portal.de/homepage/cs/90/1.4/gmx/home/homepage.min.js @Bgay) 
https://js.ui-portal.de/homepage/cs/90/1.4/gmx/home/adaptive-3col.min.css @igaya> 


SS must pass through a relatively 
complex pipeline, just like HTML and 
JavaScript. The browser must download 
the files from the server and then proceed 
0 parsing and applying them to the DOM. Due to 
extreme levels of optimisation, this process is usually 
pretty fast - for smaller web projects not based on 
rameworks, CSS usually makes up just a small part of 
otal resource consumption. 

Frameworks upset this equilibrium. Include a 
JavaScript GUI stack like jQuery Ul, and watch CSS, JS and 
HTML sizes skyrocket. Often, developers usually feel the 
pinch last - when seated behind a powerful eight-core 
workstation with T3 internet, no one cares about speed. 
This changes as latencies or CPU-constrained devices 
come to play. 

Optimising CSS requires a multi-dimensional approach. 
While hand-written code can be slimmed down using 
various techniques, going over framework code by hand 
is inefficient. In these cases, using an automated 
minimiser yields better results - developer time is not an 
unlimited resource. 


The following steps will take us on a journey through 
the world of CSS optimisation. Not every single one might 
be directly applicable to your project, but do keep them 
in mind. 


1. Use shorthand 


The fastest CSS clause is one that never gets parsed. 
Using shorthand clauses, such as the margin declaration 
shown below, radically reduces the size of your CSS files. 
A lot of additional shorthand forms can be found by 
googling ‘CSS Shorthand’. 
p { margin-top: 1px; 

margin-right: 2px; 

margin-bottom: 3px; 

margin-left: 4px; } 


p { margin: 1px 2px 3px 4px; } 


2. Find and remove unused CSS 
Eliminating unneeded parts of your mark-up obviously 
causes immense speed gains. Google’s Chrome browser 
has this functionality out of the box. Simply go to 
View>Developer>Developer Tools and open the Sources 
tab in a recent version, and open the Command Menu. 
After that, select Show Coverage and feast your eyes on 
the coverage analysis window highlighting unused code 
on the current webpage. 


3. Doitina more 

comfortable fashion 

Navigating through the line-by-line analysis is not 
necessarily comfortable. Chrome’s Web Performance 
Audit returns similar information - simply open it from 
the toolbar, View>Developer>Developer Tools>Audits 
and let it run. When done, a list of problematic elements 
will pop up. 


4. Be aware of the problems 
Keep in mind that an automatised analysis of a CSS can 
always lead to errors. Perform a thorough test of the 


entire website after replacing your CSS files with the 
minified ones - one never knows what mistakes the 
optimiser caused. 


5. Inline critical CSS 

Loading external stylesheets costs time due to latency 

- anyone remember the ‘flash of unstyled content’? The 
most critical bits of code can therefore go into the header 
tag. Make sure not to overdo it, however. Keep in mind 
that the code must also be read by humans performing 
maintenance tasks. 
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</style> 
</head> 
<body> 
<div class="blue”> 
Hello, world! 
</div> 


6. Permit antiparallel parsing 

@import adds structure to your CSS code. Sadly, the 
benefits are not for free: as imports can nest, parsing 
them in parallel is not possible. A more parallelisable 


<html> way uses a series of <link> tags, which the browser can 
<head> fetch at once. 
<style> @import url("a.css"”); 
.blue{color: blue; } @import url("b.css”); 
456 BEREAST 
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Efficient CSS with shorthand properties 


| get a lot of questions about CSS from people who aren't crazy enough to have spent the 
thousands of hours working with CSS that | have. Sometimes I'm asked to take a look at 
something they're working on to see if | can figure out why it doesn't work as expected. 
When | look at their CSS | often find that it's both bloated and unorganised. 


One of the reasons for using CSS to layout websites is to reduce the amount of HTML sent 
to site visitors. To avoid just moving the bloat from HTML to CSS, you should try to keep the 
size of your CSS files down as well, and | thought I'd explain my favourite CSS efficiency 
trick: shorthand properties. Most people know about and use some shorthand, but many 
don't make full use of these space saving properties. 


Some background 


Shorthand properties can be used to set several properties at once, in a single declaration, 
instead of using a separate declaration for each individual property. As you'll see, this can 
save a lot of space in your CSS file. 


Quite a few shorthand properties are available -- for details | suggest the W3C CSS 
specifications of the background, border, border-color, border-style, border sides (border-top, 
border-right, border-bottom, border-left), border-width, font, list-style, margin, outline, and 
padding properties. 


@ © @ Developer Tools - https://developers.google.com/web/tools/chrome-... 


® 
Fe, Clue’ _ _ . a . i : [4] 


Elements Console Sources Network » @1 : 


: Console Coverage x 


@ecs9d 
URL Type 
/prompt_emb JS 


Total Bytes 
332 368 
385 961 
241 692 
231 227 
129 754 


Unused Bytes 

283 575 85.3 % 
272 746 70.7 % 
217071 89.8% 
156 748 67.8% 
106 437 82.0 % 
88113/ 43995 49.9% 
/async_surve) | JS 57559, 41686 72.4% 

1.1 MB of 1.5 MB bytes are not used. (76%) 


/script_foot_c | JS 
/jquery_ui-bur | JS 
/script_foot.js | JS 
CSS 
/jquery-bundl: | JS 


/devsite-goog 
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@import url("c.css"); 

v<link rel="stylesheet” href="a.css"> 
<link rel="stylesheet” href="b.css”> 
<link rel="stylesheet” href="c.css"> 


7. Replace images with CSS 
Years ago, a set of semi-transparent PNGs to create 
translucent effects on websites was commonplace. 
Nowadays, CSS filters provide a resource-saving 
alternative. As an example, the snippet accompanying this 
step ensures that the picture in question appears as a 
grayscale version of itself. 
img { 
-webkit-filter: grayscale(100%); /* old 
safari */ 
filter: grayscale(10Q%) ; 
a; 


8. Use colour shortcuts 

Common wisdom teaches that six-digit colour descriptors 
are the most efficient way to express colours. This is not 
the case - in some cases, shorthand descriptions or 
colour names can be shorter. 


Don’t interfere 
with CDNs 


While minifying stock CSS looks tempting, keep the 
costs in mind. A big file served from a fast CDN can 
be faster than a small file served from a slow server. 


Color Name 
Black 

Navy 
DarkBlue 
MediumBlue 
Blue 
DarkGreen 
Green 

Teal 
DarkCyan 
DeepSkyBlue 


DarkTurquoise 


MediumSprinaGreen 


target { background-color: #ffffff; } 
target { background: #fff; } 


9. Eliminate unneeded 
zeros and units 

CSS supports a wide variety of units and number 
formats. They are a thankful target for optimisation - 
both trailing and following zeros can be removed, as is 
demonstrated in the snippet below. Furthermore, 
keep in mind that a zero always is a zero, and that 
adding a dimension does not add value to the 
information contained. 

padding: Q.2em; 

margin: 20.Qem; 

avalue: px; 

padding: .2em; 

margin: 20em; 

avalue: Q; 


10. Eliminate excessive 
semicolons 
This optimisation is somewhat critical, as it affects 
changes of code. CSS's specification lets you omit the 
last semicolon in a property group. As the savings 
achieved by this optimisation method are minimal, we 
mention this mainly for those who are working on an 
automated optimiser. 

pf 


font-size: 1.33em 


HEX Color 
#000000 
#000080 
#00008B 
#0000CD 
#0000FF 
#006400 
#008000 
#008080 
#008B8B 
#O00BFFF 
#00CED1 


#O0FA9A 


Not every hex code can be shortened. Typically code has to be in pairs to work 
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11. Use a texture atlas 
Loading multiple small sprites is inefficient due to protocol 
overheads. CSS sprites combine a series of small pictures 
into one big PNG file, which is then broken apart via CSS 
rules. Programs such as TexturePacker simplify the 
creation process greatly. 
.download { 
width: 8@px; 
height: 31px; 
background-position: -16@px -16@px 
i 
.download:hover { 
width: 80px; 
height: 32px; 
background-position: -8@px -16@px 
ai 


12. Chase down the px 
One neat way to increase performance uses a specialty of 
the CSS standard. Numeric values without a unit are 
assumed to be pixels - removing the px saves two bytes for 
each number. 

h2 {padding:@px; margin: Qpx;} 

h2 {padding:®; margin: 0} 


13. Avoid expensive properties 
Analysis has shown some tags to be more expensive than 
others. The list accompanying this step is considered to 
be especially performance-hungry - avoid them when 
given the opportunity to do so. 

border-radius 


° 
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3 Defer offscreen images mm 0.175 v 


4 Defer unused CSS = 005s a 


Remove unused rules from stylesheets to reduce unnecessary bytes consumed by network activity. Learn more 


URL Original eee 
Savings 
...assets/styles.gmx-v2.min.css (s.uicdn.com 51 KB 47 KB 
. teaser-stage{overflow:hidden;position:relative} ... 5KB 3KB 
Q Diagnostics 
More information about the performance of your applicatior 
1 Uses an excessive DOM size 1,853nodes A v 
2 Has significant main thread work 4920ms A v 


te fot 


b 


a~ 


Simplify 

debugging 

Finding errors in minified or 
optimised CSS is tedious and 
should be avoided at all costs. 
The safest workaround involves 
using the unoptimised CSS files 
during debugging, generating 
an optimised version only as 
the website is pushed live. 
Should this be unworkable for 
some reason, limit yourself to 
auto-generated optimisations. 
Many if not most optimisers 
produce so-called MAP files 
during execution. These can then 
be loaded into your debugger 

- when done, the debugger can 
correlate the optimised code to 
the unoptimised files found at 
another location in the file system. 


box-shadow 
transform 
filter 
:nth-child 
position: fixed; 
etc. 


14. Remove whitespace 

Whitespace - think tabs, carriage returns and spaces - 
makes code easier to read but serves little purpose from 
a parser’s point of view. Eliminate them before shipping. 
An even better way involves delegating this job to a shell 
script or similar appliance. 


15. Eliminate comments 

Comments also serve no purpose to the compiler. Create 
a custom parser to remove them before delivery. Not only 
does that save bandwidth but it also ensures that 
attackers and cloners have a harder time understanding 
the thinking behind the code at hand. 


16. Use automatic compression 
Yahoo's user experience team created an application 
that handles many compression tasks. It ships as a JAR 
file, available at yui.github.io/yuicompressor, and can 
be run with a JVM of choice. 

java -jar yuicompressor-x.y.z.jar 

Usage: java -jar yuicompressor-x.y.z. jar 

[options] [input file] 
Global Options 


-h, --help Displays this 
information 
--type <js|css> Specifies the 


type of the input file 


Don’t go crazy 


Premature optimisation is a dangerous game. 
While attempting to squeeze out the last bit of 


performance from your CSS is intellectually 
challenging, check if lower-hanging fruit are 
available before committing your time. 
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yuicompressor 
2.4.8 * Public + Published 6 years ago 


23 Dependents 5 Versions 


YUI Compressor - The Yahoo! JavaScript and CSS install 


Compressor 


The YU! Compressor is a JavaScript compressor which, in addition to removing comments and 


white-spaces, obfuscates local variables using the smallest possible variable name. This 


> npm i yuicompressor 


+ weekly downloads 


2,606 Wray 


obfuscation is safe, even when using constructs such as 'eval' or 'with' (although the version license 
compression is not optimal is those cases) Compared to jsmin, the average savings is around 2.4.8 none 
20%. 


open issues pull requests 


The YUI Compressor is also able to safely compress CSS files. The decision on which 


compressor is being used is made on the file extension (js or css) 
Building 


ant 


Run it from NPM 


Should you prefer to integrate the product into Node.JS, 
visit npmjs.com/package/yuicompressor. The badly 
maintained repository contains a set of wrapper files and 
a JavaScript API. 


Keep Sass et al in check 
While CSS selector performance is not nearly as critical as 
it was some years ago (see resource), frameworks such 
as Sass sometimes emit extremely complex code. Take a 
look at the output files from time to time and think about 
ways to optimise the results. 


GiftOfSpeed 


Website Speed'Test Tools Techniques 


Browser Caching Checker 


bttpurwww.gmx de CHECK 


URL: 


Caches Fes: 


bot 


http://www.kratzundfauch.at 


response headers: 421 bytes body: 229 bytes 
view body  viewhar —_validate body 
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122 19 
homepage repository 
github.com ® github 
last publish 

6 years ago 


Set up caching 
An old adage claims that the fastest file is one that never 
gets sent across the wires. Making the browser cache 
requests achieves this efficiently. Sadly, the setup of the 
caching headers must take place on the server. Make good 
use of the two tools shown in the screenshots - they 
provide a swift way to analyse the results of your changes. 


Bust the cache 


Designers often dislike caching due to fear of problems 
with upcoming changes. A neat way around the problem 
involves including tags with the file name. Sadly, the 
scheme outlined in the code accompanying this step 
does not work everywhere as some proxies refuse to 
cache files with ‘dynamic’ paths. 


Don’t forget the basics 
Optimising CSS is just part of the game. If your server 
does not use HTTP/2 and gzip compression, a lot of time 
is lost during data transmission. Fortunately, fixing these 
two problems is usually simple. Our example shows a few 
tweaks to the commonly used Apache server. Should you 
find yourself on a different system, simply consult the 
server documentation. 


General 
The Keep-Alive header is deprecated 
@ The server's clock is correct. 
@ The Content-Length header is correct. 


Content Negotiation (Content Negotiation response ) 
Th 


@ The response body is different when content negotiation happens. 
® Content negotiation for gzip compression is supported, saving 13%. 


Caching 
@ The resource last changed 4 years 191 days ago. 
@® This response allows all caches to store it. 
This response allows a cache to assign its own freshness lifetime. 


Validation _(£Taa Validation response ) _(Last-Moditied Validation response ) 
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There are alt of tools that aim to help you remove “unused CSS" from your 
project. Never a week goes by that | don't see a tool fr this being shared or 
promoted, It must strike some kind of pertect chord for some developers. care 
about performance, and know that reducing fil sizes is good for performance. 
Indeed itis, bet we hove CSS that is unused in our stylesheets, if we removed that, 
that's «performance win. Yep it would be. We should automate that Ehhnhh, tm 
not so sure. 


There are mejor performance tooling players that play up this idea, ke 
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Lorem ipsum dolor sit amet, consectetur 
adipiscing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna 
aliqua. Ut enim ad minim veniam, quis 
nostrud exercitation ullamco laboris nisi ut 
aliquip ex ea commodo consequat. Duis 
aute irure dolor in reprehenderit in 
voluptate velit esse cillum dolore eu fugiat 
nulla pariatur. Excepteur sint occaecat 
cupidatat non proident, sunt in culpa qui 
officia deserunt mollit anim id est laborum. 


Learn More 


) 


My Personal Profile 


Linkedin Twitter 


Sed ut perspiciatis unde omnis iste natus 
error sit voluptatem accusantium 
doloremque laudantium, totam rem 
aperiam, eaque ipsa quae ab illo 
inventore veritatis et quasi architecto 
beatae vitae dicta sunt explicabo. Nemo 
enim ipsam voluptatem quia voluptas sit 
aspernatur aut odit aut fugit, sed quia 
consequuntur magni dolores eos qui 
ratione voluptatem sequi nesciunt. Neque 
porro quisquam est, qui dolorem ipsum 
quia dolor sit amet, consectetur, adipisci 
velit, sed quia non numquam eius modi 
tempora incidunt ut labore et dolore 
magnam aliquam quaerat voluptatem. Ut 
enim ad minima veniam, quis nostrum 
exercitationem ullam corporis suscipit 
laboriosam, nisi ut aliquid ex ea commodi 
consequatur? Quis autem vel eum iure 


Find out about my accomplishments 


At vero eos et accusamus et iusto odio 
dignissimos ducimus qui blanditiis 
praesentium voluptatum deleniti atque 
corrupti quos dolores et quas molestias 
excepturi sint occaecati cupiditate non 
provident, similique sunt in culpa qui 
Officia deserunt mollitia animi, id est 
laborum et dolorum fuga. Et harum 
quidem rerum facilis est et expedita 
distinctio. Nam libero tempore, cum soluta 
nobis est eligendi optio cumque nihil 
impedit quo minus id quod maxime 
placeat facere possimus, omnis voluptas 
assumenda est, omnis dolor repellendus. 
Temporibus autem quibusdam et aut 
Officiis debitis aut rerum necessitatibus 
saepe eveniet ut et voluptates 
repudiandae sint et molestiae non 
recusandae. Itaque earum rerum hic 


ou can do a lot with CSS - perhaps more 
than you might think - but the 
venerable style sheet language has its 
limitations. In a modern web project, with 
npm modules, JavaScript frameworks, ES6 and more, it 
can feel somewhat anachronistic to fall back to writing 
vanilla CSS. 

Fortunately, there are options out there that allow you 
to use other languages that compile to CSS. Referred to 
as ‘preprocessors’ these tools integrate into your web 
build process and generate usable style sheets from 
whatever extension language you've chosen. 

Sass (Syntactically Awesome Style Sheets) is one of the 
most popular of these options. Sass adds many valuable 
new language features that aren't (currently) available in 
CSS to help make your sites and apps more maintainable. 
These include things like ‘mixins’ and ‘control directives’ 
which sound daunting but are actually quite 
straightforward, and we'll look at these in this tutorial. 

There are actually two different syntaxes for Sass, one 
that uses a ‘scss’ file extension, and one that uses ‘sass’. 
The former looks more like CSS (in fact, all .css files are 
valid .scss files), while the latter eliminates CSS’s brackets 
and semicolons in favour of indentation and newlines. 
We'll focus on .scss, but the choice is simply down to 
personal preference. 


1. The compiler 

Using Sass essentially requires a compiler. The simplest 

way to do this would be at the command line. You can 

do so using Homebrew. The Sass compiler is 

implemented in several different languages, and 

Homebrew will install the Dart version, which is fast. 
brew install sass/sass/sass 


2. Our first Sass file 
Let's try creating a simple Sass file to see the compiler in 
action. One of the simplest concepts in Sass is variables, 
which can be specified once with a ‘$’ prefix and then 
used throughout your code. We'll create ‘sass-input.scss’, 

$text-color: #cccccc; 

body { 

color: $text-color; 


j 


Your laptop needs more Sass. Grab a set of Sass stickers now. 


Sits 


3. Command line compilation 
Now we can run the Sass compiler at the command 
line to convert our .scss file into CSS output. You'll 
notice in the output file that the variables are gone and 
were just left with standard CSS syntax that is usable 
by the browser. 

sass sass-input.scss css-output.css 


4. Automating build 
This is great, but you don’t want to run the Sass 
compiler manually every time you make changes. One 
option is to have it listen for changes to files ina 
directory and automatically recompile the output to a 
different directory (preserving filenames). This also 
effectively lets you segregate your source .scss file from 
your built CSS. 

mkdir src 

mkdir src/sass 

mkdir public 

mkdir public/css 

sass --watch src/sass/:public/css/ 


5. Astarter site 

Now let's look at a simple starter site, which we can 
use to play around with Sass styling. We can get 
started by cloning an unstyled example site. The key 
thing to note is that our HTML page knows nothing 
about Sass. It has a single CSS file entry point, which 
we'll create next. 

cd public 

curl -o index.html https://raw. 
githubusercontent.com/simon-a-j/sass- 

tutorial/ 

master/public/index.html 
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out my accomplishments 


Here’s the starter project we'll use to 
experiment with Sass styling 


INSTALL LEARN SASS BLOG DOCUMENTATION GET INVOLVED 


CSS with superpowers 


Current Releases: Dart Sass 1.14.3 


LibSass 3.5.4 


Sass is the most mature, stable, and powerful professional 
grade CSS extension language in the world. 


Ruby Sass 3.7.0 


Implementation Guide 


The official Sass website, which has many useful resources and comprehensive documentation 
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6. The main stylesheet 
Were using styles.css as our main CSS entry point, which 
later on we'll use to import other modules. This means we 
need to tell Sass to generate this file, so we also need to 
create a styles.scss file in our src/sass folder. If youre running 
“sass --watch” as before, this will automatically be compiled 
into CSS in the ‘public/css' folder, and refreshing your site will 
show its changes. Try making some modifications and 
refreshing the HTML page in the browser as you go. 
// styles.scss 
body { 
font-family: sans-serif; 
text-align: center; 


ai 


7. Colour scheme 
Let's look at how Sass can help us manage a colour 
scheme for the site. It’s common to have a palette of 5 or 
6 colours for a webpage. We can externalise these in 
‘ colours.scss’ The underscore prefix tells Sass not to 
compile this into a new HTML file (a ‘partial’). But we can 
use it in a slightly different way. 
// _colours.scss 
$colour-primary: #231651; 
$colour-secondary: #2374AB; 
$colour-light: #D6FFF6; 
$colour-highlight1: #4DCCBD; 
$colour-highlight2: #FF8484; 


Our site now has a colour scheme thanks to a Sass partial 


8. Using variables 
To use these colour variables we've just set up, we can tell 
Sass to import the content of ‘ colours.scss’ into our main 
style sheet. We do this using an @import statement. 
Once you've done this, notice how the variables are 
resolved within the output CSS file. 
// styles.scss 
@import “_colours.scss”; 
body { 
font-family: sans-serif; 
text-align: center; 
background: linear-gradient(155deg, 


Build pipeline 
We've looked at the simplest possible command- 


line usage of Sass, but in many real-world 
scenarios, you'll want it more neatly integrated 


into your build pipeline. A lot of popular 
framework starter kits do this already, but you can 
also set it up yourself with, say, Node - in which 
case you can use gulp or npm scripts and the 
node-sass module. 
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We can introduce a responsive grid, which is easier to manage with Sass variables and nesting 


$colour-primary 70%, $colour-secondary 
70%) ; 

color: $colour-light; 

min-height: 10Qvh; 


} 
hl { 
color: $colour-highlight1; 

i; 

h2 { 

color: $colour-highlight2; 

4 

9. Nesting styles 


Another useful feature of Sass is the ability to nest 
styles. That is, you can specify a style for an element 
that is only applied if that element occurs within a 
parent element. Let’s use this to differentiate our styling 
of links depending on whether they appear in the 
header or body. 
a { 
color: $colour-secondary; 
as 
.profile-header { 
a { 
font-size: 16px; 
margin-left: 1px; 
Margin-right: 10px; 
padding: 1px; 
border-radius: 5px; 
color: $colour-light; 
background-color: $colour-secondary; 


Mixins and 
placeholders 


These might look quite similar, and there are many 
scenarios where you could use either. Generally 


mixins are most appropriate where you have 
parameters that will vary depending on where 
they are used. If the style snipped is always going 
to behave exactly the same way, with no variables 
passed to it to affect its behaviour, then a 
placeholder would make more sense. 
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10. Responsive grid 
Now let's arrange our content into a responsive grid 
format. Sass has a couple of features to make this 
significantly easier to manage. As well as using variables 
to specify our breakpoints, we can nest @media queries 
within other styles, which makes behaviour specific to 
screen size much more readable. 
$breakpoint: 8px; 
.profile-body { 
display: flex; 
align-items: stretch; 
justify-content: space-around; 
margin-top: 32px; 
margin-left: 10vw; 
Margin-right: 10vw; 
@media screen and (max-width: 
$breakpoint) { 
flex-direction: column; 


3 
.profile-section { 
background-color: $colour-highlight1; 
color: $colour-primary; 
margin: 16px; 
border-radius: 
width: 34@px; 
.profile-content { 
padding: 2px; 
} 
@media screen and (max-width: 
$breakpoint) { 
width: 100%; 


1px; 


3 


11. Introducing mixins 

Mixins are another powerful Sass feature, which you can 
think of as a way of defining reusable stylesheet functions. 
A mixin is defined once, can take parameters, and can then 
be invoked anywhere in your Sass code. One use case for 
this is to handle vendor prefixing. If we want a CSS 
transform to work in older browsers, this might require a 
“webkit’ prefix for Chrome and Safari, for example. Let's 
define a mixin that takes care of this for us. 

@mixin transform($value) { 

-webkit-transform: $value; 


LinkedIn 


Twitter 


A mixin helps us maintain backward compatibility with older 
browsers when we use CSS transforms like rotation 


-moz-transform: $value; 
-ms-transform: $value; 
transform: $value; 
iy 
.profile-logo { 
font-size: 6Qpx; 
font-family: cursive; 
@include transform(rotate(25deg) ); 
3 


12. Mixins and variables 
We can also use a mixin with multiple parameters, 
combined with some variables that we define, to more 
elegantly handle styling of various parts of the page. If we 
create a mixin that defines foreground and background 
colour, this will enable us to select appearances for 
different sections from a finite list of style variables. 
$stylel: (foreground: $colour-light, 
background: $colour-secondary) ; 
$style2: (foreground: $colour-primary, 
background: $colour-highlight1) ; 
$style3: (foreground: $colour-primary, 
background: $colour-highlight2) ; 
@mixin content-style($foreground, 
$background) { 

color: $foreground; 

background-color: $background; 
iy 


13. Using our new mixin 
Now, we can use the content-style mixin to replace colour 
and background-colour statements elsewhere in our style 
sheet. When including it, we specify one of the two $style 
variables as a parameter. Note the... after the variable 
name, which tells Sass to pass the variable’s content as a 
list, matching the number of parameters the mixin expects. 
.profile-header { 
af 
@include content-style($stylel...); 
ee 


i 
.profile-section { 
@include content-style($style2...); 
RE 


Overview Using Functions 


In-Depth Guide Tools 


{less} 


It's CSS, with just a little more. 


Use with Nodejs: 


Or the browser 


GitHub + 


Other preprocessors 

Sass is just one of the CSS preprocessors out there, 
and you might want to consider checking out the 
competition. Preprocessing is largely a stylistic 
preference, and the best choice is really the one that 
you find best suits your personal development style (or 
integrates most easily with other tooling you use). 

Less (Leaner Style Sheets) is, like Sass, an extension 
of CSS that maintains backward compatibility. It’s 
written in JavaScript so requires Node. 

Stylus has flexible syntax support, letting you write 
either regular CSS, .sass style CSS, or omit braces, 
semicolons and colons completely and write very 
concise style sheets. 

PostCSS takes a slightly different approach to the 
competition, allowing you to pick and choose which 
language extensions you need via a plugin system, 
rather than shipping everything at once. 

The features supported by most of the preprocessing 
solutions are fairly similar - you'll generally get 
variables, nesting, mixins, functions and imports. 
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14. Inheritance 
Another very powerful feature of Sass is inheritance. Right 
now we have two different styles for links in our page. If 
we want to use common styles across both, rather than 
copying and pasting CSS, why don't we use a placeholder 
class, denoted with ‘%, which can be extended by both, 
allowing them to inherit its styles? 

%link-shared { 

font-size: 16px; 

margin-left: 1px; 
Margin-right: 10px; 
padding: 1px; 
border-radius: 


} 


10px; 


15. Extending classes 
Now we can extend the link-shared class to define link 
styling throughout our site. This is starting to look quite 
elegant. We define what a link generally looks like just 
once, reuse it throughout, and specify colours from the 
palette for each link using a mixin. 
.profile-header { 
af 
@extend %link-shared; 
@include content-style($stylel...); 


y 
aint 

@extend %link-shared; 

@include content-style($style3...); 
oi 


16. Modifying the theme 
Now let’s take a look at how easy Sass makes it to modify 
the theme of our site. The current colours might not be 
perfect. We cannot only modify the colour variables, but 
we can also use some Sass functions to procedurally 
generate colours that match a primary of our choosing. 
// _colours.scss 
$colour-primary: #2E1F27; 
$colour-secondary: lighten($colour-primary, 
25%) ; 
$colour-light: lighten($colour-primary, 


75%) ; 

$colour-highlight1: 
lighten(complement($colour-primary), 50%) ; 
$colour-highlight2: 

lighten(complement ($colour-secondary), 50%); 


17. Selecting a new set of 
colours 

Now, we can modify the entire colour scheme for the 
site simply by specifying a new colour-primary value in 
the ‘colours.scss file. Give it a try by experimenting with 
alternative colours. We could also have Sass randomise 
it (but remember this refers to the point at which your 
site is built, not runtime). You can also try adjusting the 
logic we're using to derive the other colours in the 
theme from the primary. 

$red: random(255) ; 

$green: random(255) ; 

$blue: random(255) ; 

$colour-primary: rgb($red, $green, $blue); 


18. Using libraries 
Sass's module system also makes it very straightforward 
to use 3rd-party libraries with minimal effort, and without 
shipping large runtime files to your end users. Let's try out 
the Angled Edges library, which we can use to create 
sloped edges for objects on our page. 
git clone https://github.com/josephfusco/ 
angled-edges.git src/sass/angled-edges 


19. The Angled Edges mixin 
We can import Angled Edges the same way we did for our 
colour scheme partial. It's then usable via a mixin that ships 
with the library. Let's try it out in our profile-section class. 
@import “angled-edges/_angled-edges.scss”; 
.profile-section { 
@include angled-edge(“outside bottom’, 
“lower right”, $colour-highlight1) ; 
@include angled-edge(“outside top”, 
“upper right”, $colour-highlight1) ; 
margin: 120px 16px 12@px 16px; 
iota 


20. Output formatting 

Let's finish up by looking at the output Sass generates. If 
you've been tracking your CSS files as we've made 
changes, you'll notice they remain quite readable. 
However, you can also have Sass build condensed CSS, 
which is less human-readable but still ready to ship. You 
can do this using the --style’ command-line flag. 


sass src/sass/:public/css/ --style 
compressed 


21. More Sass 

We've now explored quite a few features of Sass, and our 
site isn’t looking too bad. Hopefully youre beginning to see 
how Sass helps us develop more maintainable style sheets. 
We haven't covered every feature of the language - there 
are many more useful functions shipped with it, and 
advanced features like control directives (Such as @if, @for 
and @while) that are often used to create complex library 
functions. Overall, remember that Sass is entirely a stylistic 
preference. You can do everything we've seen with pure 
CSS if you like, but you should definitely think about 
preprocessing as your work becomes more complex. 


LinkedIn Twitter 
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LET'S BREAK DOWN HOW 10 MAKE ART WITH CSS BY MAKING A CUTE ICE 
CREAM BAR GRAPHIC, GOING THROUGH TECHNIQUES STEP BY STEP 


SAY HELLO TO GSS ART 


Making CSS art can be intimidating, but it's easy 
once you break graphics down into simple parts 


If you peruse websites like 
CodePen, DevArt and Dribbble, it’s 
very easy to feel overwhelmed by 
the incredible things that 
developers and designers make, 
especially when you're just 
starting out. | made my first piece 
of CSS art after lurking on these 
sites for years and eventually 
mustered up the courage to try 
and do it. Now, a few years and 
over 100 experiments later, it’s 
one of my favourite hobbies. 
Making CSS art is interesting 
and fun. It teaches you nuances of 
CSS that you might not normally 
work with, helps you see graphics 


(and problems in general) 
modularly and improves your 
speed when writing CSS. It’s alsoa 
great way for designers and 
developers to get on the same 
page when working on a user 
interface together. As you practise 
and refine your skills making CSS 
art, you'll see an improvement in 
your day-to-day work (and you 
might even enjoy it more, too). 

In this article, we’re going to be 
making this cute ice cream bar 
graphic in CSS. I'll talk through and 
give you the code to follow, so that 
you can customise it and make it 
your own. Let’s get started! 


CSS Art 


As you practise and refine your skills 
making GSS art, you'll see an 
improvement in your day-to-day work 


(and you might even enjoy it more, too) 


ibtile 


What are you working on? Dribbble is where designers get inspired and hired. 


Looking to hire a designer? Learn more 
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Want to make 
graphics after this 
article and not sure 
where to start? 
Check out Dribbble, 
Behance and 
CodePen Challenges 
for inspiration. If you 
end up using one of 
the graphics or ideas 
you find on those 
sites, don’t forget to 
credit the work! 
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CodePen is a social 
development environment for 
front-end designers and 
developers. W 


It’s the best place to build and deploy a 
website, show off your work, build test 
cases, and find inspiration. 
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CSS Art 


LET'S MAKE ART WITH CSS 


A step-by-step guide to creating an ice cream bar graphic 


a 


1, SETTING UP YOUR 
DOGUMENT 


Before we write any CSS, we have 
to actually have something to 
style. You can use a preprocessor 
like HAML or Pug, or just straight 
HTML. I'll stick with pure HTML 
and CSS in our examples, but 
you're free to use what you’re 
most comfortable with. Pull up a 
blank Pen on CodePen or an HTML 
document, and include the 
following for the ice cream bar in 
the <body>. 


<div class=’ container’> 
<div class=’ ice-cream’> 
<div class=’ glare’ ></div> 
<div class=’ face’> 
<div class=’ eyes’> 
<div class=’eye left’> 
</div> 
<div class=’eye right’> 
</div> 
</div> 
<div class=’mouth’></div> 
</div> 
</div> 
<div class=’ stick’ ></div> 
</div> 


lM 2. COLOURS AND SIZES 


Normally when you have a graphic 
in front of you to make, you will 
need the dimensions and colours 
of that graphic. In this particular 
case, I’ll be providing you with 
those dimensions and colours. 
When you don’t have me around 
though, | recommend getting 
yourself a colour picker tool (I 
personally use Digital Color Meter 
on Mac and ColorPic on Windows), 
and a screenshot tool to figure out 
your dimensions (the native ones 
for your operating systems work 
just fine). Let’s add those 
dimensions and colours now to 
our document. 


body { 
background: #FED550; 


.ice-cream { 
width: 24@px; 
height: 35Qpx; 
background: #F982BF; 


-glare { 
width: 35px; 
height: 7Qpx; 
background: #FF98CC; 


.eye { 
width: 18px; 
height: 18px; 
background: #FF2995; 


-mouth { 
width: 75px; 
height: 25px; 
background: #FF2995; 


.stick { 
width: 6px; 
height: 72px; 
background: #ECAA7D; 
border-top: 12px solid #DB9E74; 
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3. POSITIONING 
AND TRANSFORMING 


Right now, our image is all blocky 
and in the corner. Before we shape 
everything better, let’s add some 
positioning and transforms. 
Personally, my favourite 
positioning techniques (generally) 
are absolute positioning 
containers, and using flexbox for 
everything else. If you prefer using 
absolute and relative positioning 
for everything, or even CSS Grid, 
go for it! Now, we have to position 
the container in the middle of the 
page (I'll be using absolute 
positioning and a translate 
transform), and make sure the 
contents of the main container are 
centred and rotated as needed. 
You might notice that | also added 
a couple of dimensions for the 
face’ and ‘eyes’ classes - that’s for 
handling the spacing within that 
container. Go ahead and add these 
changes in yourself to each class: 


.container { 
position: absolute; 
top: 50%; 
left: 50%; 
transform: translate(-50%, 
-50%) ; 
display: flex; 
flex-direction: column; 
align-items: center; 


.ice-cream { 
display: flex; 
flex-direction: column; 
justify-content: space-around; 


-glare { 
position: relative; 
left: 170px; 
bottom: 2Qpx; 
transform: rotate(-38deg) ; 


.face { 
display: flex; 
flex-direction: column; 


align-items: center; 
justify-content: space-between; 
height: 58px; 


-eyes { 
display: flex; 
justify-content: space-between; 
width: 145px; 


M4, PSEUDO-ELEMENTS 


Our little ice cream bar is looking 
pretty good, if | do say so myself! 
One last concept that is incredibly 
helpful for making CSS art is 
pseudo-elements. Every single 
element on a page can actually be 
three elements: the main element, 
«before, and ::after. You can style 
:before and ::after as if they’re 
separate <div>s within any 
element. For example, | could have 
changed the .eyes container to 
have no .eye <div>s at all, and just 
style a ::before and ::after for each 
eye. That would have been cool, 
but that would make styling the 
glare on each eye impossible. That 
being said, for the final missing 
glare on those eyes, let’s adda 
:before pseudo-element to make 
that possible. The key things to 
add to a pseudo-element are a 
display value and content: °. Check 
it out, and with that, we’re done! 


.eye { 
position: relative; 


.eye::before { 
display: block; 
content: ‘’; 
position: absolute; 
top: 20%; 
left: 50%; 
transform: translateX(-50%) ; 
width: 5px; 
height: 5px; 
background: #fff; 
border-radius: 100%; 


Q&A WITH CASSIDY 


Cassidy Williams tells us how she started 


making art with CSS and what inspired her 


Hi there! I’m Cassidy and I’m a senior software engineer 
at CodePen. CSS is one of the first things | taught myself 
how to code back when | was in middle school and first 
‘discovering’ the ability to make things and put it on the 
internet (from my own personal sites to guild pages on 
Neopets). Obviously the internet is very different now, but 
CSS is still around and better than ever! | love 
experimenting with it and seeing new features come out. 


| first got interested in making CSS art (with CodePen, 
actually) when | saw that Google launched their DevArt 
website (devrt.withgoogle.com) back in 2014. After 
experimenting with it a little on my own and following 
developers | admire, | decided to make it a goal to make 
CSS art regularly, around once a week, and eventually | was 
making it so often it led to me being introduced to the 
team at CodePen, and now | work there! 


It’s cliché because it’s true: Practise, practise, practise! 
Doing CSS art and experiments has made me a better 
developer. It forces you to think modularly and improves 
your ability to write Uls quickly. If you want to get better, 
keep building, even if it means trying to copy someone 
else’s art (don’t forget to give credit) or making 
something that might seem completely useless. Also, as 
someone new to the industry, it’s a really interesting skill 
to have in your portfolio. Even though you might not use 
CSS art to actually get a job, it’s a great way to get a foot 
in the door and show off your logical, creative code. 


& HTML (Ham 


-container 
vice-cream 
«glare 
face 
seyes 
seye. left 
seye. right 
-mouth 
wstick 


v 


# CSS 


body { 
background: #FED550; 
3 


scontainer { 
position: absolute; 


transform: transLate(-50%, 
display: flex; 
flex-direction: column; 
clign-itens: center; 


3 


ice-cream { 
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CSS Art 


Ahmed explains what CSS methodologies are, the most popular ones and how 
they may be combined together to create a custom methodology 


Using aCSS methodology, or a combination of many, can save 
you hours of development and debug time, leading to more 
organised code that is easier to write, scale and maintain 


Frond-end web developer at Potato 
hungryPhilomath.com 


SS methodologies refer to sets of guidelines for 

writing modular, reusable and scalable code. 

Although CSS is an easy language to write, 
without an agreed-upon convention the code gets messy 
almost as fast as it is written. Since each CSS declaration 
is defined on its own line, files get huge quickly, making 
them a nightmare to maintain. Preprocessors, such as 
Sass, Less and Compass, have done wonders to mitigate 
this problem by allowing selectors to be nested and 
blocks of code to be replaced with single-line ‘mixin’ 
declarations. While this helps, large projects can still 
require thousands of lines of code. Fortunately, 
preprocessors also allow CSS to be split across smaller 
files, or ‘partials’. But what to include in each partial and 
how they are named must be agreed upon by a team, 
otherwise their use can do more harm than good. 


MANAGE SPECIFICITY 


Another potential problem experienced with complex 
projects is managing specificity. CSS assigns a weight to 
each style rule, so when multiple rules are used on the 
same element, the highest weighted rule is considered 
more specific and is therefore applied. When multiple, 
equal-weight rules are used the lowest one wins. Specificity 
is calculated using four number groups represented as 
0-0-0-0, where numbers do not overflow from one group 
to another, so O-12-21-5 is valid. Each element or pseudo- 
element in a selector increments the right-most group, e.g. 
‘hl’ is O-0-O-1 and ‘div::before’ is O-O-O-2. Each class, 
attribute or pseudo-class increments the next group, e.g. 
“some-class.another-class’ is O-0-2-0 and ‘section. 
some-class .another-class:hover’ is O-0-3-1. IDs increment 
the next group, e.g. ‘#some-id#another-id’ is O-2-O-O and 
‘ul#some-id img.some-class:active’ is O-1-2-2. Inline styles 
applied using HTML style attributes increment the leftmost 
group and are therefore the most specific selectors. The 
higher the overall number, the more specific the selector. 
So if one developer uses ‘div.some-class’ to apply styles to 
an element, it is not possible to override them lower down 
the code using ‘some-class’ on its own. It is therefore 
common practice to use only single-class selectors when 
possible. 

To solve these and other CSS implementation issues, 
groups of coders around the world have developed 
different CSS methodologies, or sets of standard 
practices, each with their own focuses, advantages and 
disadvantages. They are not frameworks or libraries, 
rather rules for writing CSS code that encourage 
developers to stick to conventions that make code easier 
to write and maintain, saving hours of development time. 
These methodologies are not mutually exclusive and can 
be used together in a way that best suits developers. 

In this article we will take a look at a few of the most 
popular CSS methodologies, highlighting their pros and 
cons, and how they can be combined together ina 
custom methodology. 
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.media—-block { 
background: Hi#ccc; 
color: 0#414141; 
padding: 24 
width: 400 


»media—block:hover { 
background: Mi#eee; 
} 


.media—block—-small { 
width: 20@px:; 
} 


.media—block__media { 
margin-right: 24px; 
border: ipx solid CJblack; 


.media—block__content { 
font-size: 14px; 


.media—block__content-—-featured { 
font-size: 16px; 


»media—block__title { 
font-weight: bold; 


} 


.media—block__details { 
margin-top: Methodologies 


provide rules for 
} writing CSS code 


Popular CSS methodologies 


Of the vast number of CSS methodologies, we will explore the 
most popular, discussing their advantages and disadvantages 


1. OBJECT-ORIENTED CSS (OOCSS) 


Divide layout into objects, then 
abstract their CSS into modules 


on a page and separating their 
structural and visual CSS styles 
into two declaration blocks. These 
blocks can then be reused by 
different elements, and changes 
need only be made in one place, 
leading to better consistency. 
Declaration blocks are applied 
to elements using single-class 
selectors to avoid specificity 
issues. This technique also 
separates content from container, 


mark-up from CSS. Using ‘title’ 
instead of ‘h2’ for heading ‘<h2 
class="title”>’ allows it to be 
changed to ‘<h3 class="title”>’ 
without changing the CSS. To 
further separate HTML and CSS, 
class names should not include 
property values. A class ‘blue’ 
would require renaming in HTML 
and CSS if the colour changed. 


Using OOCSS a button’s CSS and 
- following CSS upon build: 


mark-up can be defined as: 
.button { padding: 1px 16px; } 
:primary-skin { color: blue; } 


.secondary-skin { color: green; } 


<button class=”button primary- 

skin”’>primary skin button</ 

button> 

<button class="button secondary- 

skin’”>secondary skin button</ 

button> 

<div class=”"primary-skin”>primary 
skin div</div> 


OOCSS introduces many useful 
concepts, but its lack of rules leads 
to variations in interpretation that 
can result in inconsistencies. It has, 
however, been used as inspiration 
for stricter methodologies. 


2. ATOMIC CSS (ACSS) 


Create acclass selector for every 
repeating CSS declaration 


ACSS encourages developers to 
define single-purpose class 


selectors for every reusable 

' declaration. Unlike OOCSS, which 
discourages CSS property values 

in class names, ACSS welcomes it. 
OOCSS involves identifying objects 
and applied to elements as: 


Using ACSS styles can be defined 


-mb-sm { margin-bottom: 16px; } 
-mb-lg { margin-bottom: 32px; } 
-color-blue { color: #1e90ff; } 


<div class=”mb-lg”> 

<p class=”mb-lg color- 
blue”>Blue text</p> 

<img class=”mb-sm” /> 
</div> 


There are programmatic 
so objects look the same wherever 
they appear. Classes also decouple : 


approaches to ACSS that 
automatically generate CSS based 


on classes or attributes that users 

: add to the HTML. Atomizer (acss.io) 
is one such tool, allowing the 

_ previous HTML to be redefined as: 


<div class=”Mb(32px)”> 
<p class=”Mb(32px) 
C(#1e90fF)”>Blue text</p> 
<img class=”Mb(16px)” /> 
</div> 


automatically generating the 


.Mb\(16px\) 
{ margin-bottom: 16px; } 
.Mb\(32px\) 
{ margin-bottom: 32px; } 


.C\@#1e90fF\) { color: #1e90ff; } 


The main benefit of ACSS is the 

: ease of maintaining consistent 
code and not having to invent 
classes for components requiring 
_ asingle CSS rule. 


However, ACSS used on its own 


can lead to an unmanageable 

- number of classes and bloated 

_ HTML files. It is therefore 

» common to only use ACSS 
principles to create helper classes 
_ that define consistent, reusable 

: declaration blocks. 


BEM encourages developers to 
: divide layouts into blocks and 


feature 


nested elements. Variations from 

the average appearance of a block 
: or element should also be identified 
and applied using modifiers. 


CSS declarations are applied 


Blocks can have nested blocks 


: and elements, but elements 
cannot. Modifiers must be used 
: alongside block and element 
classes, not instead of them. 


BEM can be applied to a list, 


where ‘list-block--inline’ and 
‘list-block__item--active’ display 
lists horizontally and highlight 
: items respectively: 


<ul class=”list-block list- 
block--inline”> 


<li class=”"list-block__ 
item’>Item 1</li> 

<li class=”list-block__ 
item’>Item 2</li> 
</ul> 


<ul class=”list-block”> 

<li class=’list-block__item 
list-block__item--active”>Item 
1</li> 

<li class=”list-block__ 
item’>Item 2</li> 


</ul> 


BEM is a highly effective naming 
: convention that creates 
predictably behaving CSS that is 
q : easy to manage, maintain and 
8. BLOCK ELEMENT MODIFIER (BEM) © 

- Usea standard naming 
convention for classes 


scale. BEM does have downsides, 


however, including the difficulty in 
inventing class names for deeply 
nested objects, the ridiculously 

: long class names and bloated 

: HTML that may sometimes result, 


and also the lack of consistency 
that is caused by the inability to 


share CSS between objects. 


| 4, SCALABLE AND MODULAR 
_ ARCHITECTURE FOR CSS (SMACSS) 


using a single class name of format | 
: ‘block-name’ for blocks and 
‘block-name__element-name’ for 

: elements, with two underscores in 
: between. Modifier names are 
appended to classes, prefixed with 
an underscore or two hyphens for 
better clarity, for example 
‘block-name__element-name_ 
modifer-name’ or ‘block-name__ 
element-name--modifer-name’. An 
: object is a block if it can exist 
without ancestors, otherwise it’s 
an element. 


Split CSS code across multiple 
files for better performance 
: and organisation 


SMACSS works by dividing CSS 
into five categories - base, layout, 
» module, state and theme - 

: commonly split into separate files. 


Base styles override the default 


styles and are mainly applied using 
_ element selectors: 


hl { font-size: 2@px; } 
a { text-decoration: none; } 


Layout styles are for major objects 
like headers and sidebars. They 
are applied using IDs or classes 
with generic helper declarations 

: optionally prefixed with ‘-’ 


#header { height: 5Qpx; } 
.l-right { float: right; } 


» Module styles are for smaller, 
reusable objects like buttons and 

» lists, each commonly with its own 
file. They are applied using classes, 
: with nested items classes 
commonly prefixed with the 

' ancestor class: 


kis Car (iaeean) 
mlbiSt——COnm Genus): 
slist==text {.. } 


State styles are for changeable states, 
like hidden or disabled. They are 
commonly applied with class names 
"prefixed with ‘is-’ or ‘has- and chained 
- to other selectors: 


-button { .. } 
-button.is-disabled { .. } 


Theme styles are optionally used 
for changing the visual scheme. 


SMACSS provides well-organised 


CSS code split logically across 
: multiple files. 


Using SMACSS does, however, 


introduce specificity traps by 
allowing IDs and relying on 

: selector chaining for state and 
» some layout declarations. 


Combining CSS methodologies 


s you have probably 

gathered from this article, 

each CSS methodology 
comes with its own benefits and 
drawbacks. It is, however, possible 
to combine aspects of multiple 
methodologies together to create 
your own custom one that works 
best for you. 

Let’s look at one way of 
combining the four methodologies 
discussed so far, for a site with a 
homepage and a button 
component, using Sass as a 
preprocessor. Applying SMACSS 
principles, we can divide our code 
across multiple Sass partials as 
shown opposite. 


Then import them into ‘styles.scss’ 


that will be converted to ‘styles.css’ 


by Sass, as follows: 
@import ‘base’; 
@import ‘helpers’; 
@import ‘components/button’; 
@import ‘pages/home’; 


Next we can add any styles that 
override the browser defaults to 
“ base.scss’, allowing mainly 
element selectors and their 
pseudo-classes: 

* { box-sizing: border-box; } 


html, 
body { height: 100%; } 


a 
{ 

&, &:active, &:focus, &:hover 
&:visited { 

text-decoration: none; 

a 

3 


Selector chains are sometimes 
required to override unwanted 
styles applied by external 
frameworks. For example, the 
‘Materialize.css’ framework applies 
padding to grid columns using a 
two-class selector chain “row .col’, 
making it impossible to override 
with a single-class BEM selector. 
Such overrides should also be 
added to ‘_base.scss’, for example 


4 src 
d js 
4 sass 


4 common 


_base.scss 


_helpers.scss 


4 components 


_button.scss 


4 pages 


_home.scss 


styles.scss 


index.html 


“row .col {padding: 16px¥. For this 
to work make sure external 
libraries are sourced in the HTML 
before ‘styles.css’. 

Using ACSS ideas we can create 
helper classes that apply 
consistent styles to any element, 
eliminating the need to create a 
new class name and component 
file for elements requiring a single 
CSS declaration. Instead we can 
apply the helper class directly to 
the HTML. For example, we can 
create a responsive, top margin 
helper class in ‘_helpers.scss’: 

.h-margin-top { 

margin-top: 16px; 

@media (min-width: 72@px) { 
margin-top: 24px; 


I; 
} 


For each component we will have 
a separate file in the ‘components’ 
directory and use a BEM 
methdology. We will allow BEM 
formatted single-class selectors, 
their pseudo-elements and an 
infinite number of chained 
pseudo-classes. For example, the 
CSS of buttons can be defined in *_ 


button.scss’ as following, with 
modifier ‘button--is-disabled’ 
greying out the button and 


» showing a tooltip with the 


message ‘disabled’ on hover: 
-button { 
position: relative; 


&__icon { width: 12px; } 


&__text { text-transform: 
uppercase; } 


&--is-disabled { 
background: grey; 


&::after { 

content: ‘disabled’; 
position: absolute; 
top: -150%; 


left: 16px; 


&:not(:hover)::after { 
display: none; 


} 


} 


Finally, we can add page-specific 
overrides to a corresponding file in 
the ‘pages’ directory. To ensure that 
these overrides are always applied 


CSS methodologies can be used together to create 
a custom methodology that works best for you 


As you can see, 
combining 
methodologies is 
easy and can lead to 
a personalised, 
consistent approach 
to CSS development 
that scales 
effortlessly and is 
easily maintained 


to our elements and those from 
external libraries with potentially 
multi-class selectors, we will give 
each page a unique ID. For example, 
we can hide disabled buttons on the 
homepage by adding the following 
to ‘ home.scss’ 

#home { 

.button--is-disabled { 

display: none; 


3 
3 


As you can see, combining 
methodologies is easy and can 
lead to a personalised, consistent 
approach to CSS development that 
scales effortlessly and is easily 
maintained. The custom 
methodology detailed above is 
just a suggestion, and my advice is 
for you to develop your own. 
Combine aspects you like from as 
many methodologies as you can 
find, adapting them to your liking, 
and stick to them. There is little 
point in creating a methodology if 
you constantly deviate from it. If 
you find yourself doing so, then 


: incorporate these deviations into 
» your methodology in a way that is 


consistent and easy to understand. 
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THE GUTTING EDGE OF 


Stay on top of CSS trends, new features and new 
properties to develop your design skills and make 
award-winning websites 


SS is one of the most important 

tools of any web designer, given 

that it adds the design styling to 
pages, but it has become far more 
important than that. Having the ability 


to put animation on pages and react to 
expanding your design skills towards 

: making award-winning websites. Check 
out the examples opposite. 


interactions is the central part of 
creating a compelling user experience. 
CSS now performs many tasks that 


: previously needed JavaScript, such as 
: off-screen menus, drop downs, 
lightboxes, accordians and parallax 

: scrolling. This makes your site more 
performant. Staying on top of trends 


and new features is essential to 


CSS is the designer’s swiss army knife, specifically created to 
add the design to your pages, it’s the magic that elevates your 
design above your competitors 


Interaction Design Professor 
twitter.com/webspaceinvader 
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WHAT'S 


RIGHT NOW 


Here’s three CSS properties for you to try today 


DESIGNING FOR DISPLAY CUTOUTS 


As the advent of phones with ‘cutout’ sections or ‘notches’ 
on the display rises, we as web designers have to think 
about what that means for our designs on those pages. 
Currently web browsers on these devices add an extra 
margin to accommodate these cutouts. Web designers 
often like to use the full screen, and now there is a way to 
do that, with Chrome leading the way. Add this meta tag 
to the document: 


Then use the CSS safe environment variables to layout 
your content: 


Now you just have to test your design in landscape and 
portrait on the device. 


GSS GLIP PATH 


The CSS clip path is one of those properties that has really 
helped push visual effects. Originally this was CSS clip, 
and is used to clip out part of the element. There are a 
number of ways to use this, including inset, which would 
inset the element by however many pixels on each side: 


There is also polygon, which would enable multiple points 
to be added so some more obscure shapes can be made. 
Circle and ellipse are fairly straightforward, but it’s also 
possible to reference a path from an SVG image as well: 


CSS CONIC GRADIENTS 


The conic gradient is very similar to a radial gradient. 
However, you can’t create a colour wheel in radial 
gradient, but you can do that with a conical gradient. 
Where radial gradients radiate between points, the 
conical moves around a circle and blends between 
colours. At first you may think this isn’t really anything 
special, but with a little creativity to add stops in the right 
places there are some great results that can be achieved. 
At present this can only be achieved using a polyfill. 
Check out Ana Tudor’s work with conical gradients. 
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Its planis to 
introduce anew 
Series of APIs that 
will open up the 
power of CSS fo the 
browser in JavaScript 
for the first time. This 
means that GSS 
features canbe 
coded by the 


designer or developer 


and have all the 
native speed of 
regular CSS 


CSS | 


MASONRY LAYOUT 


googlechromelabs.github.io/houdini-samples/ 
layout-worklet/masonry 
This is one of the Google Chrome Lab samples. In this 


example a native layout is created in CSS for a masonry- 


style layout. The Chrome Labs site is a good resource, 
as all of the currently implemented APIs have source 
code and examples available at this site. 


ANIMATION API 


CONTROLLING ANIMATION 
WITH SCROLLING 


houdini.glitch.me/animation 

This not only demonstrates the scrolling effect on the 
page but also shows exactly how it was created, with a 
tutorial explaining how the Animation API works. The 
page also contains customisable code to experiment 
with. Changing values will cause elements to scroll at 
different speeds on the page. The rest of the site has 
great resources for explaining Houdini APIs. 


peepee mmely mse 


The hello Houdini mini site has 
visual e 
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tooth edge being used 


mpl 


sophisticated 3D animation 


There are six APIs associated with what 
Houdini offers to the browser. Here three 
Sa of those are explored 


PAINT API 


RIPPLE EFFEGT 


youtube.com/watch?v=BX_qv2yKSUk 

The ripple effect shown in this example is the kind of 
effect that is found natively on Android devices, where 
one part of something is tapped and the animation 
radiates from that point. The example is useful because 
it’s on YouTube so is easy to see, and it demonstrates 
custom ‘painting’ to the browser renderer. 


TO FOLLOW 


CSS-TRICKS 


CSS-Tricks has long 
established itself as a website 
that showcases CSS features in 
great detail. Its Twitter account 
gives the latest, up-to-date 
news on CSS. 


RESPONSIVE DESIGN 


Ethan Marcotte wrote the first 
book on responsive design, 
and this Twitter account gives 
you all the CSS responsive 
information in one easy-to- 
find place. 


CSS AWARDS 


Selecting the best websites 
that are developed with CSS 
from around the world, this 
twitter account gives a great 
information feed on what can 
be designed with CSS. 


THE CSS WORKING GROUP 


The CSS Working Group is the 
group that writes the CSS 
specifications for the World 
Wide Web Consortium (W3C) 
so that all internet browsers 
adhere to the same standards. 
it is a great resource on the 
latest CSS. 


CODROPS 


Codrops is a useful resource 
for all things web 
design-related, but more 
specifically codrops has a 
strong slant towards the 
design styling of CSS. 


SVG 


ON THE WEB 


SVG support is finally where is should be. So if you're still 
using PNG for logos, icons or interact elements, it’s high 
time you learn about the power of Scalable Vector Graphics 


SVG is now widely supported on all major browsers and 
\ devices. They are super small, searchable, modifiable 


via code and scalable. They look great at all sizes and 
can be used just like images or inline right in your HTML 
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THERE ARE A HOST OF REASONS 10 IMPLEMENT SVG. FIND OUT WHAT THEY ARE 


When it comes to logos, icons, interface elements and vector- 
based artwork that you'd like to look crisp, animate or make 
responsive, there are plenty of reasons to use SVG. 


PIXEL-PERFECT SCALING 


Using PNGs or rasterised 
images means you are 
restricted to pixels. It also 
means you are likely to have 
multiple images for various 
retina devices or resolutions. 
SVG is not affected by 
resolution or whether or not 
you have a retina display. SVG 
images scale and always look 
perfect because they are 
drawn with code, not pixels. 


MODIFIABLE 
SVG can be animated and 
styled with CSS. You can 
change colours, sizes, fonts and 
so much more. Elements within 
the SVG can be responsive as 
well to use interaction. 
Animations that you use on 
HTML elements can also be 
used on SVG elements. 


Raster 


jpeg .gif .png 
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Firefox 


SMALL FILE SIZE 


PNGs can get large very 
quickly, especially when you 
need high-definition. The 
larger the file size, the 
longer it takes to load and to 
render. JPGs are better but 
also large. That means 
slower sites. SVG is just 
code, which means very 
small file sizes. Use it for 
icons, logos and anything 
that can be created as 
vector art. 


ACCESSIBILITY 
SVG files are text-based and 
can be searched and indexed. 
This makes them readable by 
screen readers, search 
engines and other devices. 
Each element within the SVG 
is also accessible for search 
but also manipulation. 


Vector 


“svg 


With a desire for fast, responsive 
experiences, SVG can make dramatic 
improvements to your site, There are several 
great times to use SVG 


LOGOS, UI ELEMENTS, ICONS AND ARTWORK ALL FIT THE PROFILE 


SVG is heavily underused, partly because it took a long time for widespread support 
across browsers. With a desire for fast, responsive experiences, SVG can make 
dramatic improvements to your site. There are several great times to use SVG. 


LOGOS AND ICONS 


Logos and icons often share a need to be 
clear and sharp at any size. Whether it’s a 
simple button or a large, screen-filling 
billboard, you want the quality consistent and 
crisp. SVG enables precise control of every 
shape, line and element. SVG icons and logos 
are more accessible, which means they're 
easier to position and manipulate in real-time. 


CHARTS, GRAPHS, INFOGRAPHICS 


SVG can be updated dynamically to plot 
data based on user actions or other 
data-driven events. This makes SVG 
perfect for things like interactive maps 
or graphics that illustrate data. 


VISUAL EFFECTS 


Many real-time visual effects can be created 
using SVG, including shape morphing and 
transitioning from one shape to another. 
You can transform letters into shapes, logos 
into other logos and much more. 


MOST MODERN WEB BROWSERS SUPPORT SVG. GREEN I$ G00D 


Chrome Safari 


Android 
Browser 
LT 


Opera i0S Safari §=— Opera Mini 


ANIMATIONS 


SVG can work with CSS animations, so 
you don’t have to learn new animation 
skills. SVG can also use its own built-in 
SMIL animation ability, which is even 
more robust if you want to make really 
creative results. 


TRADITIONAL DRAWINGS & ILLUSTRATIONS 


Many traditional illustrations translate 
really well to SVG, provided they are not 
overly complex in details. Sketches and 
diagrams to explain features of a 
product or illustrate a concept can work 
very well. 


INTERFACES AND APPLICATIONS 


SVG is ideal for complex interfaces that 
can be integrated with web-based 
applications and rich internet 
applications (RIAs). They are lightweight, 
easy to animate, and each element can 
capture user interaction events. 


Blackberry Chrome for 
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THERE ARE SEVERAL WAYS YOU CAN USE SVG ON YOUR WEBPAGES. LET'S HAVE A LOOK AT HOW A FEW OF THESE WORK 


USE THE <IMG> TAG 


To embed an SVG via an <img> element, you just need 
to reference it in the src attribute as you would with 
any image. You should define a height and width as 
well, the same as when you add images. Here is an 
example of what the HTML code looks like: 


<img src="circle.svg” alt=”a red circle” 
height="100px” width="10@px” /> 


The advantages to this method are that it is very 
quick and easy to add. You can also wrap it in an <a> 
tag to make it a hyperlink like a regular image. You 
can use CSS to affect the SVG image the same as any 
other, but you cannot use JavaScript or external CSS 
to manipulate the content of this image. You can still 
use inline CSS in the SVG code itself if you edit the 
SVG code. 


USE SVG IN CSS 


SVG images can be used as background-image in CSS 
as well, just like PNG, JPG or GIF images. Here is an 
example of including an SVG image in CSS: 


.element { background-image: url(/images/ 
image.svg); } 


The advantages of SVG, such as crispness at any size, 
are retained with this method. You can also do 
anything a raster graphic can do, like repeat, scale, 
position and more. 


INLINE SVG IN HTML 


You can also open up the SVG file in any text editor, 
copy the SVG code and paste it into your HTML 
document. We call this inlining SVG or using it inline. 
SVG code elements begin and end with the <svg></ 
svg> tags. Here is a simple example of what you could 
paste into your document: 


<svg width="100” height="100”> 
<circle cx="50” cy="50” r="40"stroke="black” 
stroke-width="4”fill="red” /> 

</svg> 


Putting your SVG inline saves HTTP requests and 
therefore can reduce your loading time. You can 
assign classes and ids to SVG elements and style 
them with CSS, either within the SVG or wherever you 
put the CSS style rules for your HTML document. In 
fact, you can use any SVG presentation attribute as a 
CSS property. 


You can use CSS to affect the SVG image the 
Same as any other, but you cannot use 
JavaScript or external CSS to manipulate the 
content of this image 


YOU CAN CODE SVG IN ANY TEXT EDITOR 


SVG uses an XML-based language for describing vector images. It’s a markup language, like HTML, 
except that you have a wide variety of elements for defining the shapes to create these images, along 


with effects to apply to these shapes as well. 


You can code SVG right along with your HTML in your favourite code editor. You can code them as 
separate files and include them, or you can code them inline in your HTML. As a simple example, the 


following code creates a circle and a rectangle: 


<svg version="1.1” 
baseProfile="full” 
width="300” height="200” 
xmlns="http://www.w3.org/2000/svg”> 


<rect width="100%” height="100%” fill="black” /> 
<circle cx="150” cy="100” r="90” fill="blue” /> 


</svg> 


APPS FOR SVG 


Since SVG is a text file, you can 
use any text editor you like to 
edit SVG manually. There are 
also a number of great apps 
for quickly creating and 
working with SVG 


Jemloms ~~ 


ADOBE ILLUSTRATOR 


adobe.com/products/illustrator 
Illustrator is easy to use and 
creates beautiful results. However, 
the resulting SVG can have some 
quirks that make it necessary to 
post-process to be perfect. 


SVG-EDIT 


svg-edit.github.io/svgedit/releases/ 
latest/editor/svg-editor.html 
SVG-edit is a fast, web-based, 
JavaScript-driven SVG drawing editor 
that works in any modern browser. 


INKSPAGE 


wacom.com/en/products/ 
apps-services/inkspace 

Ink to vector - keep your creative 
ideas alive with this editable digital 
ink. Export your sketches and 
drawings to a scalable SVG format 
for further editing and enhancing for 
web and more. 


APACHE BATIK 


xmigraphics.apache.org/batik 
Batik toolkit is written in JavaScript 
and offers almost complete SVG 
support. Batik includes a viewer 
(Squiggle), a rasteriser for PNG 
output, an SVG pretty printer to 
format SVG files, and a TrueType- 
to-SVG-Font converter. 


SVG MAKES IT EASY 10 CREATE A NUMBER OF BASIC SHAPES 


CIRCLES 


There are three attributes to use to 
create a circle. They include: 

The radius of the circle. 

The x position of the centre 

of the circle. 

The y position of the centre 

of the circle. 


The code to draw a circle is very easy 
to use. You can set the stroke colour 
and fill colour inline or separately as 
well. Here’s an example: 


<svg width="200” height="250"> 
<circle cx="400” cy="300” 
r="200” stroke="red” fill= 
”transparent” stroke- 
width="5”/> 

</svg> 


RECTANGLES 


In a similar way to making circles, 

you can create rectangles, using x 
and y for position, then height and 
width attributes to define the size. 
The code looks like this: 


<rect x="100” y="100” width= 
”400” height="300” stroke= 
”*black” fill=”transparent” 
stroke-width="5”/> 


LINES 


Lines in SVG are for straight lines. 
They take as attributes two points 
that specify the start and end point 
of the line. Here’s an example: 


<line x1="100” x2="500” yl= 
110” y2="450” stroke=”orange” 
stroke-width="5” /> 


POLYGONS 


You can also create any kind of 
polygon shape using the polygon 
element, which will conveniently 
return to the first point for you 
after the end of your list of points. 
Here’s a quick example of drawing 
a polygon: 


<polygon points="50 160, 55 
180, 70 180, 60 190, 65 205, 
5@ 195, 35 205, 40 190, 30 
180, 45 180”/> 


MAKING PATH 
& CURVES 


The <path> element is extremely powerful for making shapes. You can 
use it to create lines, curves, arcs and more. You can even use it with 
text to create text that flows along paths. 


DRAWING LINES 


To draw a line or curve, you use the path element and ‘define’ the path 
using the ‘d’ attribute. You can ‘move’ the start of a line using the ‘M’ 
command for absolute positioning and the lower case ‘m’ for relative 
positioning. You use the ‘L command to draw a line to a new point. Here 
is a quick example of a line: 


<path d=”M 10,10 L 250,250” fill=“transparent” 
stroke=“black”/> 


Here is an example of multiple lines, to show you how easy it is: 


<path d="M 10,10 L 250,250 30,100 150, 50” 
fill=”transparent” stroke=”black”/> 


DRAWING CURVES 
You can also use the ‘C’ command to draw curves. Use the ‘M’ 


command to set the start position, and then list the start, the anchor 
point and the end point like this: 


<path d=”M50 50 C 50 50, 15@ 100, 250 50” stroke=”"black” 
fill=”transparent”/> 


You can also string curves together using the ‘S’ command to make 
even more complex curves like this: 


<path d="M10 8@ C 40 10, 65 10, 95 80 S 150 150, 180 80” 
stroke="black” fill=”transparent”/> 


There are plenty of curves and paths you can create. There is a great 
resource for learning even more about paths here: developer.mozilla. 
org/en-US/docs/Web/SVG/Tutorial/Paths 


CREATE TEXT QUICKLY AND EASILY AND CUSTOMISE WITH A FEW ATTRIBUTES 


Making text is easy in SVG. You use 
the <text> tag to define it. Here is 
an example: 


<text x="10” y="10"> 
This is text.</text> 


The x and y determine the position 
of the text. Like with the shape 
elements, text can be colourised 
with the fill attribute and given a 
stroke with the stroke attribute. You 
can even use gradients and patterns 
as strokes and fills. 


SETTING FONT PROPERTIES 


Each of the following properties 
can be set as an attribute or viaa 
CSS declaration: font-family, 
font-style, font-weight, font-variant, 
font-stretch, font-size, font-size- 
adjust, kerning, letter-spacing, 
word-spacing and text-decoration. 
Like the <span> elements <tpsan> 
can also be used to select web 
sections of your text. A typical 
use-case might be to bold some 
text like this: 


SVG 2.0 is currently in 
candidate 
recommendation stage, 
which means it is not 
Supported by browsers 
yet, and it may still be 
some time before it is. 
It boasts numerous 
improvements 
and features 


<text> 
This is <tspan font-weight= 
”"bold” fill=”red”>bold and 
red</tspan> 

</text> 


This is bold and red 


You can also set strokes, fills, 
rotations, direction and much more. 
Here is a quick example of setting 
the text to draw outlines only, and to 
switch the direction of the text: 


<text x="350” y="50” 
style=”"fill: none; stroke: 
#000000; font-size: 48px; 
direction: rtl; unicode-bidi: 
bidi-override;”> 

This is text 
</text> 


This is text 


G55 & SVG 


You can use CSS styles inline, inside 
SVG elements. Here is an example: 


<svg width="350” height="60”> 
<text> 
This is <tspan font-weight 
="bold” fill=”"red”>bold 
and red</tspan> 
</text> 
<style><! [CDATAL 
text{ 
dominant-baseline: hanging; 
font: 28px Verdana, Helvetica, 
Arial, sans-serif: 
jj 
J]></style> 
</svg> 


You can also use CSS separately, 
just like with any other elements 


| txet si sihT 


: We use the direction style and set it 
» to ‘tl’, which means right to left. We 
: also have to set the unicode-bidi 

_ style to ‘bidi-override’. 


_ USING TEXTPATH 


: This element uses the xlink:href 

: attribute to connect to a path and 

: aligns the characters along this path. 
» This enables you to draw virtually 

: any path you wish, and then attach 

: your text to it, so it follows it. Here’s 

: an example: 


<path id=”my_path” d=”M 40,40 
C 200,100 10,100 520,200” 
fill="transparent” /> 
<text> 

<textPath xmlns:xlink=” 
http: //www.w3.org/1999/xlink” 
xlink:href="#my_path”> 

This Text is Curved 

</textPath> 

</text> 


Use inline or 
external CSS 


on your page. For example, if you 
set a class attribute on your SVG 
shape, you can set its colour 
through regular CSS like this: 


<svg class=”"logo” width="400” 
height="400” viewBox="0 @ 400 
400”> 
<rect class=”box” x="0” 
y="0” width="400” height= 
400” fill="#56AQD3” /> 
</svg> 


And the CSS would be: 


-box { fill: red; } 


Notice we had inline colouring 
that we then overrode with our 
CSS. Pretty cool! 


Learn more with these 
great resources 


MOZILLA DEVELOPER 
NETWORK (MDN) 


developer.mozilla.org/kab/docs/ 
Web/SVG 

A great resource for learning the 
ins and outs of SVG, with many 
examples to help get you up 
and running. 


CSS-TRICKS - 

EVERYTHING YOU NEED 

TO KNOW ABOUT SVG 
css-tricks.com/lodge/svg 
CSS-Tricks hosts a complete SVG 
video tutorial series here. It 
covers what SVG is, why use it, 
how to use it and much more. 


ENVATOTUTS - 
HOW TO HAND CODE SVG 


webdesign.tutsplus.com/ 
tutorials/how-to-hand-code-svg-- 
cms-30368 

envatotuts has a nice in-depth 
tutorial that dives into many 
great examples of hand-coding 
SVG, including reusing SVG in 
your page. 


WHAT ABOUT SVG 2? 


SVG 2.0 - a brand new SVG 


SVG 2.0 is currently in candidate 
recommendation stage, which 
means it is not supported by 
browsers yet, and it may still be 
some time before it is. It boasts 
numerous improvements and 
features. It also removes or 
deprecates some features of SVG 1.1 
and incorporates new features from 
HTML5 and Web Open Font Format. 

SVG 2.0 removes several font 
elements, such as glyphs, and they 
are replaced by the WOFF font 
format. Also the xml:space attribute 
is deprecated in favour of CSS. 

It reached candidate 
recommendation stage on 15 
September 2016. The latest draft 
was released on 18 October 2018. 
You can read more about it and 
follow its progress here: w3.org/TR/ 
SVG2 


The number one 
destination for web design 
news, views and how-tos. 
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he appetite for single-page applications 
is greater than ever. Instead of a 
complete page reload each time the user 
clicks a link or fills a form in, we can 
provide real-time feedback using JavaScript and do the 
heavy lifting in the background. As developers, we have 
greater control over the data that gets transferred, and 
the user enjoys a faster, seamless experience - it’s a 
win-win. 

But without that constant connection back to the 
server, the state of the application has to live on the 
client-side. Frameworks like React are great at storing 
state at a component level but start to struggle when 
dealing with large sets of application-wide data. Explicitly 
passing that data through as props can clutter up the 
code and increases the surface area for bugs to appear. 

Redux takes the state of an application and places it in 
one location. By combining with React, we can have the 
whole interface powered by a centralised data store. This 
makes an application more reliable, more testable, and 
when issues do arise they become easier to replicate. 

This tutorial is the first in a five-part series where we will 
be building PhotoShare - an application that allows 
visitors to comment directly on a set of photos. While it 
seems simple on the outside, there is lots to keep track of, 
from photos to the users and their comments. 

In this part of the tutorial we will cover the basic 
concepts around Redux, such as actions, reducers and 
the data store. Later in the series we will use these 
concepts to power interactions such as form filling or 
server communication. 


1. Install dependencies 

Before we get started, we need to download all the files 
needed to run this application. Inside ‘package json’ we 
can see the dependencies, including React, Redux and 
the ‘reactredux’ package that deals with the connection 
between the two. Download the project files, then head 


to the directory in the command line and install the 
dependencies. Yarn is required to manage those 
dependencies, if this hasn't been downloaded already. 
Then start the development server. 

> yarn 

> yarn start 


2. Initialise the store 
The store is the heart of Redux. It holds the state of the 
application and orchestrates all communication to and 
from it. There should only ever be one store per 
application. Open up ‘indexjs’ and create a store. This is 
done using the ‘createStore’ function from Redux. Pass in 
the root reducer, which we will come to later. 
import { createStore } from "redux"; 
import rootReducer from 
",/reducers/root”; 
const store = createStore( 
rootReducer) ; 


3. Pass in the store 
Before React can use any data from the store, it needs to 
be given access to it. The ‘reactredux’ package has a 
<Provider> component that can provide access to any 
component that requests it. Import the <Provider> 
component and wrap it around the rendered content. 
Now we can start pulling in the state data wherever the 
application needs it. 
import { Provider } from "react-redux”; 
[eal 
ReactDOM. render ( 
<Provider store={store}> 
<BrowserRouter> 
<App /> 
</BrowserRouter> 
</Provider>, 
document. getElementById("root”) 
DE 
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4. Set up root reducer 
A reducer is a function that knows how to update the 
store. The store only deals with one reducer. We can use 
Redux's ‘combineReducers’ method to split that into 
separate, smaller reducers that each have a specific role, 
such as storing information about the photos or the state 
of the interface. Our first reducer will hold the photos 
within the gallery. Open up ‘reducers/rootjs’ and import 
that reducer in. 

import { combineReducers } 

from "redux"; 
import photos from ”./photos”; 
const rootReducer = combineReducers({ 
photos 
Ds 


export default rootReducer; 


5. Create photos reducer 
When a reducer is called, it gets passed the current state 
from the store and an object describing a change to the 
state known as an ‘action’. The return value of the reducer 
is what then becomes the store’s new state. Open up 
‘reducers/photos/photosjs’ and create our first reducer. 
For now, every action will return the state straight back 
without any updates. 

const initialState = {}; 

export const reducer = 

(state = initialState, action) => { 
return state; 


Use more than switch 


Redux does not specify the shape of a reducer. 
While a switch statement is most common, use 


what makes sense for the application. The 
structure does not matter so long as the state 
object is returned. 


Photo Share © 


Above 

Starting the development server 
should also open up the application in 
the default browser. If it does not, head 
to http://localhost:3000 


Right 

While developing the application it will 
display full-screen errors as well as 
the usual console ones. When built for 
production, these do not appear 


B React App x + 
€ CS © localhost:3000 Q* 10} 9 
Error: Expected the reducer to be a function. x 


v 11 stack frames were expanded. 


liftReducer 
<anonymous>:1:39246 


(anonymous function) 
<anonymous>: 1: 39338 


(anonymous function) 
<anonymous>:1:27895 


createStore 
node_modules/redux/es/redux. js:87 


»/src/index.js 
src/index.js:17 


__webpack_require__ 


/Users/matt/Desktop/Redux 1/working-copy/webpack/bootstrap c59c363e83a6e5815931:678 


fn 


/Users/matt/Desktop/Redux 1/working-copy/webpack/bootstrap c59c363e83a6e5815931: 88 


) 
http://localhost:3000/static/js/bundle. js:45541:18 


__webpack_require__ 


/Users/matt/Desktop/Redux 1/working-copy/webpack/bootstrap c59c363e83a6e5815931:678 


This screen is visible only in development. It will not appear if the app crashes in production. 


Open your browser's developer console to further inspect this error. 
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export default reducer; 


6. Apply initial state 
Each reducer is likely to have data stored in an expected 
shape, such as an array or an object to hold specific 
information about that part of the state. We can initialise it 
with a set of values from the outset. For this application 
we will pre-fill the photo data locally. Usually this would 
come from a remote server and would initially be empty. 
Import the example response and provide it as initial state 
to the reducer. 

import exampleResponse from 

"../../example-response” ; 
const initialState = exampleResponse; 


7. Select the photos 

While not strictly required by Redux, selector functions 
are a useful way to get exactly what you need out of the 
store. They filter out the rest of the data to leave only what 
is needed for each component. Open up ‘selectors/ 


How many 
connections? 


Connecting too many components couples an 


application closer to Redux, while too few 
re-renders parent components unnecessarily. It’s 
important to find a balance that works best in 
each application. 
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photos/photosjs’ and create a selector that gets all the 
photos for the gallery. 
export const getGalleryPhotos = 

state => Object.values(state.photos) ; 


8. Connect with Redux 
For React components to access the store we created in 
step 3, we need to connect them to Redux. To do this we 
use ‘connect’ from the ‘reactredux’ package. ‘connect is 
an example of a higher-order component - an established 
React pattern that provides functionality to a passed 
component. Head to ‘components/container/Gallery/ 
Galleryjs’ import ‘connect’ and use it to replace the 
exported component. 

import { connect } from "react-redux”; 

[eral 

export default 

connect () (GalleryContainer) ; 


9.Map state to props 
There are two parameters we can pass to ‘connect’. The 
first is a special function that allows us to pass parts of the 
state from Redux into components. The ‘connect’ 
function gets the state from the store and passes it to 
selectors. Selectors then get what they need and return it 
to the component as a prop. Create this 
‘mapStateToProps function and use it to pass the ‘photos’ 
prop into <GalleryContainer>. We can now see the images 
start to appear in the gallery. 

import { getGalleryPhotos } 

from "../../../selectors”; 


export const mapStateToProps = 
state => ({ 
photos: getGalleryPhotos(state) 
1D 
export default connect (mapStateToProps) 
(GalleryContainer) ; 


10. Select a photo 


With the gallery complete, we still need a way to view 
specific photos in more detail. Clicking a photo in the 
gallery shows us a <Photo> component on its own page, 
but it’s currently blank. Create another selector in 
‘selectors/photos/photos,s’ to select a specific photo. We 
can re-use the logic of ‘getGalleryPhotos' like we would 
any other function. 
export const getPhoto = (state, id) => 
getGalleryPhotos(state) 
.find(photo => photo.id === id); 


11. Link single photo 
As this component is not linked to <Gallery>, we need to 
connect it to Redux separately. We can use the same 
approach to pull information out using ‘mapStateToProps’ 
and the new selector. Open ‘components/container/ 
Photo/Photojs’ and connect this component to the store. 
import { connect } from "react-redux"; 
import { getPhoto } from 
" of. .f,./selectors”; 
export const mapStateToProps = 
(state, props) => ({ 
photo: getPhoto(state) 
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dispatch(action) 


ACTION CREATOR 


state: {... 


showComment (3) 


CONTAINER 
COMPONENT 


reduce(statr, action) 


} 
SELECTOR SELECTOR SELECTOR 


photo: {...} 


CONTAINER 
COMPONENT 


The Redux data lifecycle 

At its core, Redux is a set of functions and 
objects with specific jobs to do. By ensuring 
each part stays separate and communicates 
in a defined way, Redux can help keep the 
state of an application up to date all from 
one place. 

The application’s state lives within the 
store. We can use selectors to pick out the 
relevant parts of that state and pass it on to 
the components that need it. 

The only way to update the data in the 
store is through an action, which is typically 
triggered by a user. The action creators 
make objects based on parameters, which 
are then passed to each reducer connected 
to the store. They check the action, perform 
some modification to the state and returna 
new copy for the selectors to use. 

Each part of this process can be built 
upon and expanded without affecting the 
rest. This means that as the application 
grows the data store can scale with it. 


IDs 
export default connect( 
mapStateToProps) (PhotoContainer) ; 


12. Pass through ID 


The selector still requires an ID to get the correct photo 
from the store. The ‘mapStateToProps’ function has a 
second argument that passes through the component's 
current prop values. The routing within the application 
provides the ID of the photo, which is passed as an ‘id’ 
prop. Update ‘mapStateToProps’ to use this new ID. 
Clicking on the first photo in the gallery now shows a 
larger version. 

export const mapStateToProps = 

(state, props) => ({ 
photo: getPhoto(state, props.id) 
Ds 


13. Show comment 

In this application, users can leave comments on a 
specific part of the photo. These will be displayed as an 
overlay on the image itself. Open up ‘components/ 
presentational/Photo/Photojs’ and start adding 


comments after the <img> component. Pass all the data it 


needs as separate props. 
import Comment from 
"../../container/Comment” ; 
[eal 
{comments.map(({ comment, id, left, 
top, user }) => ( 
<Comment comment={comment} 
id={id} key={id} left={left} 
top={top} user={user} 
/>))} 


14. Hide other comments 


Inside the <Comment> component, the ‘comment__box— 


open’ class is causing all of the comments to display at 
once. We can use Redux to only show the active 
comment. Head to the component at ‘components/ 
presentational/Comment/Commentjs. Update the 


className to only show up when the ‘isCommentOpen’ 
prop is true. 
<div className={* comment__box 
comment__box--${direction} ${ 
isCommentOpen ? "comment__box--open” 
Dae: 


eo 


15. Create Ul reducer 


We need to record which comment is currently open in 
the store. As it’s not directly related to a photo, we should 
create a new reducer to handle this part of the state. 
Open ‘reducers/ui/uijs and create a reducer similar to the 
one for photos. 

const initialState = { 


commentOpen: undefined 
}; 
export const reducer = ( 
state = initialState, action) => { 
switch (action.type) { 
default: return state; 
ay 
3; 
export default reducer; 


16. Link the reducer 

Before Redux can access our new reducer, we need to 
pass it through to the root reducer. Go back to ‘reducers/ 
rootjs’ and add the new UI reducer into the call to 
‘combineReducers. Any UI data inside the store can now 
be accessed under the ‘ui’ property. 
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Tutorials 


Manage React application data with Redux 
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Performance 
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Inspector 

filter 
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© Pause recording @ Lock changes 4 Persist 


Memory 


& Dispatcher 


Security Audits Redux React 


React App 


Action | State | Diff | Test 


Dispatch. 


© Slider + Export {% Remote % Settings 


Debugging with 
Redux DevTools 


With Redux quietly running in the 
background, it can be difficult to know 
exactly what’s going on. We could log 
out each new state as an action comes 
in, but this seems unsuited and noisy. 

Thankfully there is a browser 
extension available that can tap into a 
Redux store and even manipulate it in 
real time. Not only can it track actions 
and show the current store state, but 
also undo those actions to help see 
how the application changes. 

It taps into the store through an 
‘enhancer’ - a module with access to 
the API behind Redux to extend its 
behaviour. It is recommended that this 
enhancer is removed when building 
the application for production. 

The extension is available for 
Chrome and Firefox. For more 
information head to github.com/ 
zalmoxisus/redux-devtools- 
extension 


import ui from "./ui”; 

const rootReducer = combineReducers({ 
photos, 
ui 


J) 


17. Create an open selector 
With the UI state now in place, we can check to see which 
comment is open. Go to ‘selectors/ui/uijs’ and add an 
‘isCommentOpen’ selector. By passing the ID of the 
current comment, we can check it against the state. If the 
comment is open, then the selector returns true and 
the comment appears. 
export const isCommentOpen = 
(state, id) => 
state.ui.commentOpen === id; 


18. Connect the comments 

Now everything is set up, we can connect each 
<Comment> component to the store, like with <Gallery>. 
Head over to ‘components/container/Comment/ 
Commentjs’ and connect everything up like before. Pass 
the new selector inside ‘mapStateToProps’. 


Try and get more of the sky in next 
time 


The shadow is my favourite bit 


She is so cute! 
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import { connect } from "react-redux"; 
import { isCommentOpen } from 
cab sais ot SELECLOLS 5 


export const mapStateToProps = 

(state, props) => ({ 
isCommentOpen: isCommentOpen( 
state, props. id) 

»; 


export default connect(mapStateToProps) 
(CommentContainer) ; 


19. Toggle comment actions 
To tell Redux which comment should be visible, we 
need to dispatch an action to the reducers. By using 
action creator functions, we can be sure that the action 
object looks the same each time. Add a couple of 
action creators in ‘actions/ui/uijs’ to show and hide a 
comment by ID. We use constants for the type so they 
can match up with the reducer later on. 

import { HIDE_COMMENT, SHOW_COMMENT } 
"../../constants/actions”; 
export const hideComment = () => ({ 

type: HIDE_COMMENT 

De 


from 


export const showComment = id => ({ 
type: SHOW_COMMENT , 
payload: id 

Ds 


20. Update the Ul reducer 

When either action is dispatched it ends up passing 
through the UI reducer we created earlier. By using the 
‘type’ property in the action, we can match an action to a 
change in the store. Add cases for the actions in 
‘reducers/ui/uijs. These will either record or clear the 
open comment ID. 


import { HIDE_COMMENT, SHOW_COMMENT } 
from “../../constants/actions” ; 
Feral 


case HIDE_COMMENT: 
return { 
...State, 
commentOpen: undefined 


ie 


case SHOW_COMMENT: 
return { 
...State, 
commentOpen: action.payload }; 


21. Dispatch new actions 
The ‘connect’ higher-order component takes a second 
function, which gives access to the ‘dispatch’ method 
from Redux. In short, this ‘mapDispatchToProps’ function 
works similar to ‘mapStateToProps’ but allows us to 
dispatch actions. Back in ‘components/containers/ 
Comment/Commentjs’, hook up ‘mapDispatchToProps 
to pass through functions that can be called when a 
comment is clicked. 

import { hideComment, showComment } 

Thom “2/.a/. factions: 


export const mapDispatchToProps = 
(dispatch, props) => ({ 
hideComment: () => 
dispatch(hideComment()), 
showComment: () => 
dispatch(showComment (props. id)) 
»; 


export default connect( 
mapStateToProps , 
mapDispatchToProps 

) (CommentContainer) ; 
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HOSTING LISTINGS 


Featured host: Netcetera 


netcetera.co.uk 
03330 439780 


About us 


Formed in 1996, Netcetera is one of 
Europe’s leading web hosting service 
providers, with customers in over 75 
countries worldwide. 

As the premier provider of 
data centre colocation, cloud hosting, 
dedicated servers and managed web 
hosting services in the UK, Netcetera 
offers an array of services designed to 
more effectively manage IT 


What we offer 

- Managed hosting - A full 
range of solutions for a cost- 
effective, reliable, secure host. 


- Cloud hosting - Linux, 
Windows, Hybrid and Private 
Cloud Solutions with support 
and scalability features. 


5 tips from the pros 

1. Reliability, trust & support 
Reliability is a major factor when it 
comes to choosing a hosting partner. 
Netcetera guarantees 100 per cent 
uptime, multiple internet routes with 
the ability to handle DDOS attacks, 
ensuring your site doesn't go down 
when you need it. 


2. Secure and dependable 
etcetera prides itself on offering its 
clients a secure environment. 

t is accredited with ISO 27001 for 
security along with the options of 
configurable secure rackspace available 
in various configurations. 


3. 24/7 technical support 


etcetera has a committed team of 


infrastructures. A state-of-the-art data 
centre environment enables Netcetera 
to offer your business enterprise-level 
colocation and hosted solutions. 
Providing an unmatched value for your 
budget is the driving force behind our 
customer and managed infrastructure 
services. From single server to fully 
customised data centre suites, we focus 
onthe IT solutions you need. 


- Data centre colocation - 
Single server through to full 
racks with FREE setup and a 
generous bandwidth. 


- Dedicated servers - From 
QuadCore up to Smart Servers 
with quick setup and 
fully customisable. 


knowledgeable staff available 24/7 to 
provide you with assistance when you 
need it most. Our people make sure 
you are happy and your problems are 
resolved as quickly as possible. 


4. Value for money 

We do not claim to be the cheapest 
service available, but we do claim to 
offer excellent value for money. We also 
provide a price match on a like-for-like 
basis, as well as a price guarantee for 
your length of service. 


5. Eco-friendly 

Netcetera’s environmental commitment 
is backed by use of eco-cooling and 
hydroelectric power. This makes 
Netcetera one of the greenest data 
centres in Europe. 
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66 Premier provider of 

data centre colocation, cloud 
hosting, dedicated servers 
and managed web hosting 
services in the UK 99 


One of the greenest and mast efficient 
Datacentres'in' the UK 
#ZeroCatbonDatacentre 


Learn More Browse Racks 


Netcetera Hosting 


Our Services 


Testimonials 

RoyT 

i have always had great service from Netcetera. Their technical support is 
second to none. My issues have always been resolved very quickly” 


Suzy B 

“We have several servers from Netcetera and their network connectivity is 
top-notch, with great uptime and speed is never an issue. Tech support is 
knowledgeable and quick in replying. We would highly recommend Netcetera” 


Steve B 
“We put several racks into Netcetera, basically a complete corporate backend. 
They could not have been more professional, helpful, responsive or friendly. All 
the team were an absolute pleasure to deal with, and nothing was too much 

trouble, so they matched our requirements 100 per ce nt” 


Supreme hosting 


OCWCS irre Siero 
MANAGED HOSTING 

cwcs.co.uk 

08001777000 

CWCS Managed Hosting is the UK’s 
leading hosting specialist. They offer a 
fully comprehensive range of hosting 
products, services and support. Their 
highly trained staff are not only hosting 
experts, they're also committed to 
delivering a great customer experience 
and are passionate about what they do. 


« Colocation hosting 
- VPS 
- 100 per cent network uptime 


UK-based hosting 


<ée CYBERHOST 


cyberhostpro.com 

0845 5279 345 

Cyber Host Pro are committed to 
providing the best cloud server 
hosting in the UK; they are obsessed 
with automation. If you're looking for a 
hosting provider who will provide you 
with the quality you need to help your 
business grow, then look no further 
than Cyber Host Pro. 


- Cloud VPS servers 
- Reseller hosting 
- Dedicated servers 


Cluster web hosting 
fasthosts 


fasthosts.couk 

0808 1686777 

UK-based and operating 24/7 from 
dedicated UK data centres. Fasthosts 
keep over 1 million domains running 
smoothly and safely each day. Services 
can be self-managed through the 
Fasthosts Control Panel. 


- Dedicated servers 
- Cloud servers 
- Hosted email 


Budget hosting 


HETZNER 


ONLINE 


hetzner.com 

+49 (0)9831505-0 

Hetzner Online is a professional web 
hosting provider and experienced data 
centre operator. Since 1997, the company 
has provided private and business clients 


All-inclusive hosting 


land1.co.uk 

0333 3365509 

1&1 Internet is a leading hosting 
provider that enables businesses, 
developers and IT pros to succeed 
online. Established in 1988, 1&1 now 


with high-performance hosting products 
as well as the infrastructure for the 
efficient operation of sites. A combination 
of stable technology, attractive pricing, 
flexible support and services has enabled 
Hetzner Online to strengthen its market 
position nationally and internationally. 


- Dedicated/shared hosting 
- Colocation racks 
- SSL certificates 


operates across ten countries. With a 
comprehensive range of high- 
performance and affordable products, 1&1 
offers everything from simple domain 
registration to award-winning website 
building tools, eCommerce packages and 
powerful cloud servers. 


- Easy domain registration 
- Professional eShops 
- High-performance servers 


SSD web hosting 


<> bargainhost 


bargainhost.co.uk 

0843 289 2681 

Since 2001, Bargain Host have 
campaigned to offer the lowest possible 
priced hosting in the UK. They have 
achieved this goal successfully and built 
up a large client database, which includes 
many repeat customers. They have also 
won several awards for providing an 
outstanding hosting service. 

« Shared hosting 

- Cloud servers 

- Domain names 


Agency hosting specialist 


STORM 


nimbushosting.co.uk 
02031266781 

Nimbus Hosting have partnered with 
agencies to develop our revolutionary 
platform STORM. With a team dedicated 
to outstanding support, our 5-star Google 
reviews truly speak for themselves. Join 
the thousands of agencies and 
freelancers who are benefitting from a 
control panel that speeds up your website 
developement as well as your client’s 
websites. Supercharge your digital 
projects today with STORM. 

¢ 30-second WordPress install 
¢ Deploy directly from GitHub 
e Easy team management 


Flexible cloud servers 


elastichosts 


elastichosts.co.uk 

020 7183 8250 

ElasticHosts offer simple, flexible and 
cost-effective cloud services with 
high performance, availability and 
scalability for businesses worldwide. 
Their team of engineers provide 
excellent support 24/7 over the phone, 
by email and with a ticketing system. 

- Cloud servers with any OS 

« Linux OS containers 

- 24/7 expert support 
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Featured: 


ORTH Northcoders 
Cc O D = Ie S Tie ees 


Facebook: Northcoders 


66 No matter what your 
background, you can 
fast-track your career and 


Northcoders is the coding bootcamp full-time bootcamp, or fit their course 


for the north, based in the heart of around your life with their 24-week 

Manchester and built upon northern part-time bootcamp. Their internal become a web or software 
values of grit, determination and career support team will help find you s 

community spirit. No matter what work as a developer, setting up developer ‘igi 12 weeks 99 
your background, you can fast-track interviews with your choices of 

your career and become a web or Northcoders Hiring Partners across 


software developer in 12 weeks at their the north of England. 


¢ Full-time: ¢ Part-time: 
Fast-track your career Fit our curriculum around 
in just 12 weeks yout life in 24 weeks 


Become a software 


developer in just 
12 weeks 


1. Get started with coding for you, set aside a few evenings 
The best way to know if coding = each week to really start making 


iS for you is to just try it! We progress! If coding is for you, 
recommend the free, online this should be fun. 
JavaScript track of 
Codecademy to get you 4. Be prepared 
started with the basics. We'll be with you every step of 
the way when you apply. Make sade api esata 
2. Do your research sure you go through all the 
Make sure you read plenty materials we recommend and 
of student reviews to make ask for help if you're stuck. 
sure you're applying 
somewhere reputable. Read 5. Get social 
their blog and have a look at With Northcoders, youre not 
their social channels. just on a course, youre part of a 
community that will stay with 2 
3. Throw yourself in you long after you graduate. 7 ae 2 


Once you've decided it’s right Make the most of it! 


Becoming part of this vibrant, caring community was 
something | hadn’t expected before the course, but 
now | couldn't be without it. To be a Northcoder is to 
be enlightened, inspired and supported 

Joanne Imlay 

Primary school teacher to software developer at Careicon 


Northcoders delivered their part of the bargain in spades. 
They provided tremendous assistance in turning me into 
the full product - a well-rounded, capable future tech 
employee - and they have the contacts to deliver the 
opportunities for such people. 

Joe Mulvey 

Maths teacher to software developer at Auto Trader 
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U d emy WEGOT CODERS 


‘2 WE GOT CODERS 


UDEMY 

udemy.com wegotcoders.com 
hello@wegotcoders.com 

Twitter:@udemy We Got Coders is a consultancy that 

Facebook: udemy provides experts in agile web 


development, working with startups, 
The inspiration for Udemy began ina . = 3 gua en eae eT bay agencies and government. Take one of 
small village in Turkey, where founder avee @ - B NGS LEAR N their 12-week training courses that covers 
Eren Bali grew up frustrated by the —a° MIN all that is required to become a web 


Get your learning lineup ready. 


limitations of being taught in a : bibhviep tc oaks developer, with highly marketable 


one-room school house. Realising 

the potential of learning on the internet, 
he set out to make quality education 
more accessible. Udemy is now a 
global marketplace for learning and 
teaching online. Students can master 
new skills by choosing from an 
extensive library of over 40,000 
courses, including HTML, CSS, UX, 
JavaScript and web development. 


40,000+ courses: There is a 
course for every designer and dev. 
Self-paced learning: Learn how 
to code at your own pace. 


= THE 
IRON YARD 


theironyard.com 


Twitter: @ThelronYard 
Facebook: ThelronYard 


The Iron Yard is one of the world’s 
largest and fastest growing in-person E r 4 
code schools. It offers full-time and Wee ad 
part-time programs in back-end Opie : 
engineering, frontend engineering, ‘ 
mobile engineering and design. The 
lron Yard exists to create real, lasting 
ange for people, their companies 
and communities through technology 
ucation. The in-person, immersive 
format of The Iron Yard's 12-week 
courses helps people learn to code 
and be prepared with the skills needed 
to start a career as junior-level 
software developers. 


12-week code school: Learn 
the latest skills from industry pros. 
Free crash courses: One-night 
courses, the perfect way to learn. 


full-stack web development skills. 


- Classroom-based training 
« Real-world work experience 
- Employment opportunities 


FUTURELEARN 


Future 
Learn 


futurelearn.com 
feedback@futurelearn.com 
Choose from hundreds of free online 
courses, from Language & Culture to 
Business & Management, Science & 
Technology to Health & Psychology. 
Learn from the experts. Meet educators 
from top universities who'll share their 
experience through videos, articles, 
quizzes and discussions. 


- Learn from experts 
- Free courses 
- All-device access 


GYMNASIUM 


GYMNASIUM 


thegymnasium.com 
help@thegymnasium.com 
Gymnasium offers free online courses, 
designed to teach creative 
professionals in-demand skills. 
Courses are all self-paced and taught by 
experienced practitioners with a passion 
for sharing practical lessons from the 
design trenches. 


- Gain real-world skills 


- Get expert instruction 
- Career opportunities 
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Essentialassets | Exclusive Tutorial Plus, all of this 
and resources video tutorials project files Is yours too... 
Get textures, fonts, Learn to code/create All the assets you'll need + All-newiutorial flasto help you 
backgrounds and more with HTML, CSS & JS to follow our tutorials master this issue’s HTML, CSS 


and JavaScript techniques 

+ New chapters from Killersites 
expert PHP video courses 
(shop.killervideostore.com) 

+ 24Luminous presets and 10 iPad 
Pro hi-res mockups from 
Sparklestock worth $36 
(www.sparklestock.com) 


Log in to www.filesilo.co.uk/webdesigner 


TL 


Register to get instant access 
to this pack of must-have 


creative resources, how-to 
videos and tutorial assets 


FileSilo 


The home of great 

downloads — exclusive to 

your favourite magazines 

from Future! 

Q Secure and safe online 

© access, from anywhere 

Q Free access for every 

© reader, print and digital 

Q Download only the files 
you want, when you want 

Q All your gifts, from all your 

@ issues, in one place 


Everything you need to 
know about accessing 
your FileSilo account 


Follow the instructions on 


screen to create an 


account with our secure FileSilo Su bscribe today & unlock the free 


system. Log in and unlock the 


vost ae gifts from more than 70 issues 


Over 70 hours More than Over 250 
of video guides 400tutorials creative assets 


You can access FileSilo 

on any computer, tablet 
or smartphone device using any 
popular browser. However, we 


recommend that you use a z 
computer to download content, DEVELOPMENT ; 
as you may not be able to 
download files to other devices. 
Designing the animation test environment = el 


Head to page 50 to subscribe now 


If you have any 


pranemeuin ©) Already a print subscriber? + 
accessing content on FileSilo, © More 
take a look at the FAQs online Unlock the entire Web Designer FileSilo library with your added 
or email our team at the unique Web ID — the ten-digit alphanumeric code printed above eve 
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